Vue项⽬中 登录时 对于token的处理

Vue项⽬中实现token验证⼤致思路如下：
1、⽤户输⼊账号密码，前端调后端的登陆接⼝，发送⽤户名和密码，
2、后端收到请求，验证⽤户名和密码，验证通过后（即登录成功），后端返回token给前端；
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页⾯；
4、前端每次跳转路由，都要判断 localStroage 中有⽆ token ，没有就跳转到登录页⾯，有则跳转到对应路由页⾯（ 通过
router.beforeEach((to, from, next)=>{.....}）)
5、每次调后端接⼝，都要在请求头中加上token；
6、后端判断请求头中有⽆token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回编码
401（编码由前台和后台约定好），请求头中没有token也返回编码401；
7、如果前端拿到状态码为401，则清除token信息并跳转到登录页⾯，并弹框提⽰⽤户当前缺少token或者token已失效，请重新登录。

---

举个例子：

控制后台主页的访问权限

需求：登录后才能访问后台主页

目标：使用全局导航守卫控制页面权限

// 声明全局前置守卫，控制后台主页的访问权限
router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    // 访问的是后台主页，需要判断是否登录
    // 获取本地的 token
    const token = localStorage.getItem('token')
    if (token) {
      // 已登录，直接放行
      next()
    } else {
      // 没登录，跳转到登录页
      next('/login')
    }
  } else {
    // 其他页面直接放行
    next()
  }
})

token 值无效时，清空 token，并强制跳转到登录页

目标：使用 axios 响应拦截器处理 token 失效的问题

 // 定义响应拦截器
  axios.interceptors.response.use(function(response) {
    // 请求成功时（状态码为 200），触发的回调函数，response 是“成功的结果”
    return response
  }, function(error) {
    // 请求失败时（状态码不是 200），触发的回调函数，error 是“失败的结果”
    // token 失效
    if (error.response.status === 401) {
      // 清空 token
      localStorage.removeItem('token')
      // 跳转到登录页
      router.push('/login')
    }
    return Promise.reject(error)
  })