（二十）VueCli3.0全栈——路由守卫和token过期处理

1、路由守卫

路由守卫：当我们没有登录页面之前，我们访问一些页面都不会真实地进入到里面去。

• 修改router.js (client/src/router.js)

import Vue from 'vue'
import Router from 'vue-router'
import Index from './views/Index.vue'
import Register from './views/Register'
import Login from './views/Login'
import NotFound from './views/404'
Vue.use(Router)

// router接收
 const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path:'/',
      redirect:'/index'
    },
    {
      path:'/index',
      name:'index',
      component:Index
    },
    {
      path:'/register',
      name:'register',
      component:Register
    },
    {
      path:'/login',
      name:'login',
      component:Login
    },
    {
      path:'/*',
      name:'404',
      component:NotFound
    }
  ]
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // 判断localstorage里面是否有token
  const isLogin = localStorage.eleToken ? true : false;
  
  if(to.path == "/login" || to.path == "/register"){
    next();
  }else{
    // 如果为真，正常跳转，否则跳到登录页面
    isLogin ? next():next('/login');
  }


})

export default router;

用了一个const接收router，在跳转之前进行判断。若localstorage里面有登录时候的token，正常跳转，若没有，则跳转到登录页。

• 测试

在开发者模式中把之前localstorage里面存储的eleToken清空，再次访问除登录注册的其他页面，会发现页面仍跳转到登录页。

成功实现了路由守卫。

2、Token过期处理

配置请求和响应拦截，在登录成功之后，我们应该将我们的token设置为请求头，然后在响应拦截的时候判断当前的token是否是过期的。如果过期，localstorage里面就得删掉过期token，如果没过期，需要token的接口就可以正常使用了。

​ 请求拦截：如果存在localStorage.eleToken，则设置为统一的请求头

​ 响应拦截：判断当前返回的状态码是不是401，如果是401，代表当前token失效，如果失效，需要把失效的token从localstorage里面删掉。

• 完善请求响应拦截(client/src/http.js)

  import axios from 'axios';
  import {Message,Loading} from 'element-ui';
  import router from './router';
  
  let loading;
  
  function startLoading() {
      loading = Loading.service({
          lock: true,
          text: '拼命加载中...',
          background: 'rgba(0,0,0,0.7)'
      });
  }
  
  function endLoading() {
      loading.close();
  }
  // 请求拦截
  // 请求的时候需要加载动画
  axios.interceptors.request.use(
      config => {
      // 加载动画
      startLoading();
  
      if(localStorage.eleToken){
          // 设置统一的请求头
          config.headers.Authorization = localStorage.eleToken;
      }
  
      return config;
      }, 
      error => {
          return Promise.reject(error);
      }
  );
  
  //响应拦截
  axios.interceptors.response.use(
      response=>{
          // 结束加载动画
          endLoading();
          return response;
      },
      error=>{
          // 错误提醒
          endLoading();
          Message.error(error.response.data);
  
          // 获取错误状态码
          const {status} = error.response;
          if(status == 401){
              Message.error("token失效，请重新登录");
              // 清除token
              localStorage.removeItem("eleToken");
              // 跳转到登录页面
              router.push("/login");
          }
  
          return Promise.reject(error);
      }
  )
  
  
  export default axios;