Vue Router 在路由更改时捕获 401 并销毁本地存储 JWT答案

【问题标题】：Vue Router catch 401 on route changes and destroy local storage JWTVue Router 在路由更改时捕获 401 并销毁本地存储 JWT
【发布时间】：2020-12-31 15:32:19
【问题描述】：

拥有一个使用 vuejs 和 vue-router 创建的仪表板应用程序，我的大多数路由都需要身份验证，如果令牌过期，我想全局捕获并在这种情况下路由回登录组件。

现在路由器看起来如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import AttendersView from '@/views/AttendersView.vue'
import LoginView from '@/views/LoginView.vue'
import store from '../store'
import log from '@/middleware/log'
Vue.use(VueRouter)

const routes = [
  {
    path: '*',
    meta: {
      name: '',
      requiresAuth: true
    },
    redirect: {
      path: '/attenders'
    }
  },
  {
    path: '/login',
    component: LoginView,
    meta: {
      guest: true
    },
    children: [
      {
        path: '',
        component: () => import('@/components/LoginForm.vue')
      }
    ]
  },
  {
    path: '/',
    meta: {
      name: 'Dashboard View',
      requiresAuth: true
    },
    component: () => import('@/views/DashboardView.vue'),
    children: [
      {
        path: '/attenders',
        name: 'Anmeldungen',
        component: AttendersView,
        meta: {
          requiresAuth: true,
          middleware: log
        }
      },
      {
        path: '/organizations',
        name: 'Verbände',
        meta: {
          requiresAuth: true,
          middleware: log
        },
        component: () => import(/* webpackChunkName: "about" */ '../views/OrganizationsView.vue')
      },
      {
        path: '/workgroups',
        name: 'Arbeitsgruppen',
        meta: {
          requiresAuth: true,
          middleware: log
        },
        component: () => import(/* webpackChunkName: "about" */ '../views/WorkgroupsView.vue')
      },
      {
        path: '/status',
        name: 'Status',
        meta: {
          requiresAuth: true,
          middleware: log
        },
        component: () => import(/* webpackChunkName: "about" */ '../views/StatusView.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: 'dashboard',
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    }
    if (to.hash) {
      return { selector: to.hash }
    }
    return { x: 0, y: 0 }
  }
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters.authorized) {
      next()
      return
    }
    next('/login')
  } else {
    next()
  }
})

export default router

这是我的自定义 request.js

import axios from 'axios'

class HttpClient {
  constructor (token) {
    if (localStorage.getItem('token')) {
      token = localStorage.getItem('token')
    }
    const service = axios.create({
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`
      }
    })

    this.service = service
  }

  redirectTo = (document, path) => {
    document.location = path
  }

  get (path) {
    return this.service.get(path)
  }

  patch (path, payload, callback) {
    return this.service
      .request({
        method: 'PATCH',
        url: path,
        responseType: 'json',
        data: payload
      })
  }

  post (path, payload) {
    return this.service.request({
      method: 'POST',
      url: path,
      responseType: 'json',
      data: payload
    })
  }

  delete (path, payload) {
    return this.service.request({
      method: 'DELETE',
      url: path,
      responseType: 'json',
      data: payload
    })
  }

  download (path) {
    return this.service.request({
      method: 'POST',
      url: path,
      responseType: 'blob'
    })
  }
}
const HttpRequests = new HttpClient()
export default HttpRequests

现在我在组件中这样做是为了捕获 401

methods: {
    fetchInitialData: function () {
      this.isLoading = true
      HttpClient.get(API_ATTENDERS_ENDPOINT).then(resp => {
        this.attenders = resp.data.attenders
        this.organizations = resp.data.organizations
        this.workgroups = resp.data.workgroups
        this.isLoading = false
      }).catch(error => {
        if (error.response.status === 401) {
          this.$store.dispatch('logout')
        }
      })
    }

但我需要一些通用的东西。

什么是最好的方法，我应该在哪里放置 axios 拦截器？

【问题讨论】：

标签： vue.js axios jwt vue-router http-status-code-401

【解决方案1】：

你可以做的是使用导航守卫来完成这个任务：https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

在用户输入您希望附加身份验证的任何路由之前，您可以在输入之前进行，然后检查他们的权限。

如果成功，则使用next() 传递，或者将它们扔到登录中。

【讨论】：