vue-路由守卫+token过期处理

路由守卫

想要实现只有在登录或者注册成功的状态下，才能进入系统，这时候就可以使用路由守卫

配置路由守卫

在route.js中进行配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import Register from '../views/Register.vue'
import NotFound from '../views/404.vue'
import { from } from 'core-js/fn/array'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/index',
  },
  {
    path: '/index',
    name: 'index',
    component: Index
  },
  {
    path: '/register',
    name: 'register',
    component: Register
  },
  {
    path: '*',
    name: '/404',
    component: NotFound
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 路由守卫核心代码
router.beforeEach((to,from,next) => {
  // 先判断浏览器中是否已经有token了，有则true，否则false
  const isLogin = localStorage.token ? true : false
  
  //然后判断要去往的页面，如果是去往login和register页面的，就直接放行
  //如果不是去往login和register页面，则判断有没有token，如果有token就放行，否则就跳转login页面
  if (to.path == '/login' || to.path == '/register') {
    next
  }else {
    isLogin ? next() : next('/login')
  }
})

export default router

token过期处理

在成功登陆以后，如果想要访问有token权限的接口，则需要在请求拦截和响应拦截中再进行处理

请求拦截处理

在请求拦截中，添加统一的请求头

// 请求拦截
axios.interceptors.request.use(config => {
    startLoading()

    // 设置统一的请求头：如何配置访问有token的接口
    if (localStorage.token) {
        config.headers.Authorization = localStorage.token
    }

    return config
}, error => {
    return Promise.reject(error)
})

响应拦截处理

如果返回的接口数据中，状态码未401，说明token过期或失效，则需要清除浏览器中缓存的token

// 响应拦截
axios.interceptors.response.use( response => {
    endLoading()
    return response
}, error => {
    endLoading()
    Message.error(error.response.data)

    // 获取错误状态码，token失效
    const { status } = error.response
    if (status == 401) {
        Message.error('token失效，请重新登录')
        // 清除token
        localStorage.removeItem('token')

        // 重新跳转到login页面
        router.push('/login')
    }

    return Promise.reject(error)
})