通过利用vue+vuex+axios这几种技术实现登录、注册页权限拦截（详细教程）

下面我就为大家分享一篇vue+vuex+axios实现登录、注册页权限拦截，具有很好的参考价值，希望对大家有所帮助。

在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

 
     
登录
                                                 登录           
 export default { name: 'login', data() {  const validateUsername = (rule, value, callback) => {  if (value.trim().length {  if (value.trim().length  {   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   }  })  } } }

登录后复制

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

立即学习“前端免费学习笔记（深入）”；

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

红黑树的插入详解及Javascript实现方法示例

js+canvas实现滑动拼图验证码功能

JS从非数组对象转数组的方法小结

立即学习“前端免费学习笔记（深入）”；

以上就是通过利用vue+vuex+axios这几种技术实现登录、注册页权限拦截（详细教程）的详细内容，更多请关注【创想鸟】其它相关文章！