Vue.js Vue路由器捕获401路由更改并销毁本地存储JWT

使用vuejs和vue路由器创建仪表板应用程序时，我的大多数路由都需要身份验证，我希望全局捕获令牌是否过期，并在这种情况下路由回登录组件

现在路由器看起来如下

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拦截器？

您可以使用导航卫士执行此任务：

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

---

如果他们成功，请使用

next（）

继续，或者将他们扔到登录位置。

您可以使用导航卫士执行此任务：

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

如果他们成功，则使用

next（）

继续，或将其抛出到登录