vue+vuex+axios实现登录、注册页权限拦截


Posted in Javascript onMarch 09, 2018

在GitHub上有很多写好的模板,这个项目也是基于模板做的。

现在记录一下我做的过程

1、修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分

BASE_API: '"http://192.168.xx.xx"',

2、接下来就是操作src文件,先在 views里写好vew组件(login.vue,regist.vue),写好到router里的index.js里配置好路径

login.vue

<template>
 <div class="login-container">
  <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
     label-width="0px"
     class="card-box login-form">
   <h3 class="title">登录</h3>
   <el-form-item prop="name">
  <span class="svg-container svg-container_login">
   <svg-icon icon-class="user"/>
  </span>
    <el-input name="name" disabled type="text" v-model="loginForm.name" autoComplete="on"
      placeholder="用户名"/>
   </el-form-item>
   <el-form-item prop="password">
  <span class="svg-container">
   <svg-icon icon-class="password"></svg-icon>
  </span>
    <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
      autoComplete="on"
      placeholder="密码"></el-input>
    <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye"/></span>
   </el-form-item>
   <el-form-item>
    <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
    登录
    </el-button>
   </el-form-item>
  </el-form>
  </div>
</template>
<script>
 export default {
 name: 'login',
 data() {
  const validateUsername = (rule, value, callback) => {
  if (value.trim().length<1) {
   callback(new Error('用户名不能为空'))
  } else {
   callback()
  }
  };
  const validatePass = (rule, value, callback) => {
  if (value.trim().length < 1) {
   callback(new Error('密码不能为空'))
  } else {
   callback()
  }
  };
  return {
  loginForm: {
   name: '',
   password: ''
  },
  loginRules: {
   name: [{required: true, trigger: 'blur', validator: validateUsername}],
   password: [{required: true, trigger: 'blur', validator: validatePass}]
  },
  loading: false,
  pwdType: 'password'
  }
 },
 methods: {
  showPwd() {
  if (this.pwdType === 'password') {
   this.pwdType = ''
  } else {
   this.pwdType = 'password'
  }
  },
  handleLogin() {
  this.$refs.loginForm.validate(valid => {
   if (valid) {
   this.loading = true;
   this.$store.dispatch('Login', this.loginForm).then(() => {
    this.loading = false;
    this.$router.push({path: '/'});
   }).catch((e) => {
    this.loading = false
   })
   } else {
   console.log('error submit!!')
   return false
   }
  })
  }
 }
 }
</script>

router/index.js

{ path: '/login', component: _import('Login/login'), hidden: true }

3、在api里的login.js里写好与后端对接的接口地址,在stores里的modules里的user.js里定义user,有state,mutations,action,具体的请求操作写在action里,login.vue或regist.vue调用user.js里写好的请求,getter.js里定义store的getters

api/login.js

import request from '@/utils/request'
export function login(name,password) {
 return request({
 url: '/XX/XX',
 method: 'post',
 data: {
  name,
  password
 } 
 })
}

stores/modules/user.js

import { login,regist,logout } from '@/api/login'
  import { getToken,setToken } from '@/utils/auth'
  const user = {
  state: {
   name:'',
   token:''
  },
  mutations: {
   SET_NAME: (state, name) => {
   state.name = name;
   },
   SET_TOKEN: (state, token) => {
   state.token = token;
   setToken(token);
   }
  },
  actions: {
   // 登录
   Login({ commit }, userInfo) {
   const name = userInfo.name.trim();
   const password = userInfo.password.trim();
   return new Promise((resolve, reject) => {
    login(name, password).then(response => {
    const data = response.data;
    commit('SET_NAME', data.name);
    commit('SET_TOKEN', data.token);
    setName(data.name);
    setToken(data.token);
    resolve(response); }).catch(error => { reject(error) }) }) },
   // 注册 
   Regist({ commit }, userInfo) { 
   const name= userInfo.name.trim(); 
   const password = userInfo.password.trim(); 
   return new Promise((resolve, reject) => { 
    regist(name, password).then(response => { 
    const data = response.data; 
    commit('SET_NAME', data.name); 
    commit('SET_TOKEN', data.token);
    setName(data.name);setToken(data.token); 
    resolve(response);
    }).catch(error => { 
    reject(error) }) }) }, 
   // 登出 
   LogOut({ commit, state }) {
   return new Promise((resolve, reject) => {
   logout().then(response => {
    commit('SET_NAME', '');
    commit('SET_TOKEN', '');
    setName('');
    setToken(false);
    //removeName();
    //removeToken();
    resolve(response);
   }).catch(error => {
    reject(error)
   })
   })
  }, 
   // 前端 登出 
   FedLogOut({ commit }) { 
   return new Promise(resolve => {
  setToken(false);
 commit('SET_TOKEN', false);
 resolve()
   })
   }
  }
  }
  export default user

getter.js:

const getters={
 name:state=>state.user.name,
 token:state=>state.user.token
}
export default getter

4、在utils里的auth.js里对cookies进行操作,写入,读取,删除用户权限,是否登录的标志等

import Cookies from 'js-cookies'
export function setName(name) {
 return Cookies.set("name", name);
}
export function getName() {
 return Cookies.get("name");
}
export function setToken(token) {
 return Cookies.set("token", token);
}
export function getToken() {
 return Cookies.get("token");
}

5、在permission.js里写白名单,对白名单以外的跳转进行拦截然后跳转登录,同时判断用户权限,是否登录,等

import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import {Message} from 'element-ui'
import {getName, getToken} from "@/utils/auth"; // 验权
const whiteList = ['/login', '/regist']; // 不重定向白名单
router.beforeEach((to, from, next) => {
 NProgress.start();
 if (whiteList.indexOf(to.path) !== -1) {
 next();
 } else {
 if (getToken()==="true") {
  next();
  NProgress.done()
 } else {
  next({path: '/login'});
  NProgress.done()
 }
 }
})
router.afterEach(() => {
 NProgress.done() // 结束Progress
})

6、utils里的request.js里写拦截码,对后端返回的特定码进行拦截然后做相应的操作

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
// 创建axios实例
const service = axios.create({
 baseURL: process.env.BASE_API, // api的base_url
 timeout: 15000     // 请求超时时间
});
// respone拦截器
service.interceptors.response.use(
 response => {
 /**
 * code为非200是抛错 可结合自己业务进行修改
 */
 const res = response.data;
 //const res = response;
 if (res.code !== '200' && res.code !== 200) {
  if (res.code === '4001' || res.code === 4001) {
  MessageBox.confirm('用户名或密码错误,请重新登录', '重新登录', {
   confirmButtonText: '重新登录',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   store.dispatch('FedLogOut').then(() => {
    location.reload()// 为了重新实例化vue-router对象 避免bug
   })
  })
  }
  if (res.code === '4009' || res.code === 4009) {
  MessageBox.confirm('该用户名已存在,请重新注册!', '重新注册', {
   confirmButtonText: '重新注册',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   store.dispatch('FedLogOut').then(() => {
   location.reload()// 为了重新实例化vue-router对象 避免bug
   })
  })
  }
  return Promise.reject('error')
 } else {
  return response.data
 }
 },
 error => {
 Message({
  message: error.message,
  type: 'error',
  duration: 5 * 1000
 });
 return Promise.reject(error)
 }
)
export default service

以上就是登录注册的核心部分,写的不对的地方请指教

这篇vue+vuex+axios实现登录、注册页权限拦截就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 #Javascript
vue + vuex todolist的实现示例代码
Mar 09 #Javascript
vue实现在表格里,取每行的id的方法
Mar 09 #Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 #Javascript
vue的安装及element组件的安装方法
Mar 09 #Javascript
11行JS代码制作二维码生成功能
Mar 09 #Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php截取字符串函数分享
2015/02/02 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
Python发送Email方法实例
2014/08/21 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python palywright库基本使用
2021/01/21 Python
python源文件的字符编码知识点详解
2021/03/04 Python
奶茶店创业计划书范文
2014/01/17 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
建设投标担保书
2014/05/13 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
高考学习决心书
2015/02/04 职场文书
遗嘱范文
2015/08/07 职场文书