vue实现登录拦截

Vue项目登录拦截操作：路由导航守卫控制访问权限

1. 为什么要设置路由导航守卫？
   回答：因为有些页面是有权限的，不是登录状态不能直接访问。
2. 在Vue项目中使用什么来记录登录状态？
   回答：采用token，如果在Session Storage中记录了token值，表示已经处于登录状态，反之为未登录状态。
3. 实现代码

// 为路由对象 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的的路径
  // from 代表从哪个路径跳转
  // next 是一个函数 表示放行 next() 放行 next('/login') 强制跳转
  //如果用户访问的登录页面，直接放行
  if (to.path === '/login') return next()
  // 从sessionStorage中获取到保存的 token值
  const tokenStr = window.sessionStorage.getItem('token')
  //没有token 强制跳转到登录页
  if (!tokenStr) return next('/login')
  next()
})

beforeEach是router的钩子函数–》beforeEach接收一个回调函数，回调函数带有三个参数

• from: 即将离开的路由
• to: 即将要跳转的路由
• next: 跳转方法。
• 在beforeEach函数中作为结束语句调用，以实现跳转网页。
• 使用beforeEach钩子函数结合requireAuth属性判断网页是否需要登录验证、再使用vuex进行token判断， 就能实现登录拦截的功能

4. 出现的问题：当前token失效了，但是token依然保存在本地。这时候你去访问需要登录权限的路由时，实际上应该让用户重新登录。
   这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。
5. 拦截器
   要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。

// http request 请求拦截器
axios.interceptors.request.use(
    config => {
    //为请求头对象 添加token验证的Authorization字段
        config.headers.Authorization = window.sessionStorage.getItem('token')
        return config;
    })

登出功能也就很简单，只需要把当前token清除，再跳转到首页即可。