vue中登录逻辑梳理

1.当你登录一个vue搭建的网站的时候，你输入网址敲击回车之后，你触发的网站程序的第一步一定是 全局路由钩子，在钩子里判断你是要跳转至哪里，以及通过token来判断用户是否登录，来决定用户跳转至哪里（因为是全局的，所以每一步都会触发），如果你要是设置动态路由的话，你刚刚登录的这个阶段，你路由配置中存在的路由一定是所有用户公用的（login、home、修改密码等）。

router.beforeEach((to, from, next) => {
  const token = getToken()
  if (to.path === '/login') {
    if (token) {
      next('/workbench')
    } else {
      next()
    }
  } else {
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})

2.注意第一点就算token存在其实token也可能是过期的，所以需要在axios处配置一个全局的响应拦截器，所以在第一点中如果token存在，然后进行页面跳转，只要有请求发送，后台会返回401，可以通过此状态码在axios的全局响应拦截处将路由跳转至登录页。

axios.interceptors.response.use(
  (res) => {
    console.log(res)
    if (res.data.Status === '401') {
      // token过期 或没有 token 跳转至登录页面
      window.location.pathname = '/login'
    }
    return res
  }, (error) => {
    console.log(error)
  }
)

3.登录页的处理，每次登录成功返回的token需要存入localStorage中，然后再存到vuex中，实际上只要单独存在localStorage中就够用，但每次去从local Storage中获取token的时候实际执行的是磁盘读取，较为耗费性能，所以每次登录都应该把token从localStorage中转存到vuex中。