vuex + axios拦截器 + 导航守卫实现登陆/注销功能

基本思想

首先要知道登陆不单单是拿着用户名和密码经过接口发给后端就大功告成了（小白的我以前就是这样认为的）要从几个方面考虑

• 异步登陆，经过登陆接口拿到token
• 利用vuex的state管理token、用户信息等
• 利用axios拦截器，拦截每一次请求/响应来处理token

❝

token是用户登陆成功的标识，每一次请求数据时都要发送token给后端验证 & 接收后端返回状态码判断当前用户登陆状态

❞

• 利用导航守卫进行登陆拦截
• 密码传输加密（通常须要引入第三方加密，自行百度）

「如下代码仅作参考」

登陆的基本实现

点击按钮触发事件submitForm login.vue文件中

methods: {
 submitForm(formName) {  this.$refs[formName].validate(valid => {  if(valid) {  this.$store  .dispatch("userLogin", this.ruleForm)  .then(() => {  // 登陆成功的提示  this.$router.push("home");  })  .catch(response => {  // 登陆失败的提示  });  }  } else {  // ...  }  })  } } 复制代码

store.dispatch方法触发Action

actions: {
 userLogin({ commit }, userInfo) {  return new Promise((resolve, reject) => {  // 当即执行userLogin方法，详见下面的代码  userLogin(userInfo.username, userInfo.password).then(response => {  const data = response.data.data  // 提交mutation来修改state  commit('SET_TOKEN', data.token)  // 调用setToken目的是把token存入到localStorage/sessionStorage/cookie中去  // state中定义token经过getToken()获取token值  setToken(data.token)  resolve()  }).catch(error => {  reject(error)  })  })  },  // ...  } 复制代码

axios拦截器

个人拦截器目录是 /src/utils/request.js

// 建立axios实例
const service = axios.create({  baseURL: '/api', // 根据项目自行配置  timeout: 5000 // 请求超时时间 })  // request拦截器，在请求头中加入token service.interceptors.request.use(config => {  if (store.state.user.myToken) { // 从store的state中拿到token  // config.headers.'后端接收token的名字'  config.headers.myToken = store.state.user.myToken  }  return config }, error => {  Promise.reject(error) })  // respone拦截器 service.interceptors.response.use(response => {  const res = response.data  if (res.errno === 501) {  // MessageBox是elementUI的组件，提示用  MessageBox.alert('系统未登陆，请您登陆', '错误', {  confirmButtonText: '肯定',  type: 'error'  }).then(() => {  // 登出  })  return Promise.reject('error')  } else if (res.errno === 502) {  // 写法相似  } else {  return response  } }, error => {  // Message是elementUI的组件，提示用  Message({  message: '未知错误',  type: 'error',  duration: 5 * 1000  })  return Promise.reject(error) })  export default service 复制代码

上面说过的userLogin() 目录/src/api/login.js 与login.vue对应，统一存放请求代码，方便维护

// 引入上面的拦截器
import request from '@/utils/request'  export function userLogin(username, password) {  const data = {  username,  password  }  return request({  url: '/login',  method: 'post',  data  }) } 复制代码

导航守卫

在须要登陆才能进入的路由中添加meta: { requireAuth: true }

export default new Router({
 mode: 'history',  routes: [  // ...  {  path: '/login',  name: 'login',  component: login,  beforeEach: (to, from, next) => {  if (to.meta.requireAuth) { // 判断是否须要登陆权限  // 判断是否有token  if (store.state.user.myToken) {  next() // 知足条件就放行  } else {  next('/login')  }  } else {  next()  }  }  },  ] }) 复制代码

总结

以上就是使用vuex + axios拦截器 + 导航守卫实现登陆的大体流程。涉及到登出（注销）这里没有写，不过登陆都会了注销并不难，走个接口清空本地保存的token就能够了。
如下是一些自问自答

• 为何要使用vuex

❝

由于经过登陆获得的用户信息在多个组件中都会用到，使用vuex直接经过state或getter访问变量很方便。但不要为了使用vuex而使用vuex

❞

• 既然用了vuex为何还要将token存放到localStorage/sessionStorage/cookie中去

❝

由于刷新会致使vuex的state中的变量重置为初始值（「变量值会丢失」）

❞

• 那为何要用vuex？

❝

... 上面回答过了

❞

[end]

本文使用 mdnice 排版