vue 路由拦截、axios请求拦截

路由拦截

项目中，有些页面需要登录后才能进入，例如，在某页面A，用户在操作前需要先进入登录页（此时需要将上一页的地址（/survey/start）作为query存入login页面的地址中，如: http://localhost:8071/#/login?redirect=%2Fsurvey%2Freport），登录成功后再进入页面A。

首先，在router.js中创建路由时，给需要登录的路由中的 meta 添加字段：requireLogin，如下：

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login,
      meta: {
        title: '登录页'
      }
    },
    {
      path: '/register',
      name: 'Register',
      component: Register,
      meta: {
        title: '注册页'
      }
    },
    {
      path: '/',
      redirect: '/survey/start',
      name: 'Full',
      component: Full,
      children: [
        {
          path: '/survey/start',
          name: 'Home',
          component: Home,
          meta: {
            title: '首页',
            requireLogin: true
          }
        },
        {
          path: '/survey/report',
          name: 'Report',
          component: Report,
          meta: {
            title: '详情页',
            requireLogin: true
          }
        }
      ]
    }
  ]
})

然后使用 router.beforeEach 注册一个全局前置守卫：

// 全局导航钩子
router.beforeEach((to, from, next) => {
  if (to.meta.title) { // 路由发生变化修改页面title
      document.title = to.meta.title
  }
  if (to.meta.requireLogin) {
    if (store.state.token) {
      if (Object.keys(from.query).length === 0) { // 判断路由来源是否有query，处理不是目的跳转的情况
        next()
      } else {
          let redirect = from.query.redirect // 如果来源路由有query
          if (to.path === redirect) { // 避免 next 无限循环
            next()
          } else {
            next({ path: redirect }) // 跳转到目的路由
          }
      }
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
      next()
  }
})

关于Vue Router导航守卫，参考：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

axios 请求拦截

上面的方法只是进行了前端拦截，无法确定存储在本地的token是否已经失效。需要 axios 拦截器：

在mian.js 中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from 'axios'
import './assets/styles/reset.css'
import './plugins/element.js'
import htmlToPdf from './utils/htmlToPdf'

Vue.config.productionTip = false

Vue.use(htmlToPdf)

// http request 拦截器
Axios.interceptors.request.use(
  config => {
    if (sessionStorage.getItem('token')) { // 若存在token，则每个Http Header都加上token
      config.headers.Authorization = `token ${sessionStorage.getItem('token')}`
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  })

// http response 拦截器
Axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回 401 (未授权) 清除 token 并跳转到登录页面
          sessionStorage.removeItem('token')
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return Promise.reject(error.response.data) // 返回接口返回的错误信息
  }
)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')