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)
})