Vue路由器在路由更改时捕获401并破坏本地存储JWT

问题描述

@H_404_0@具有使用vuejs和vue-router创建的仪表板应用程序，我的大部分路由都需要进行身份验证，如果令牌已过期，我想在全球进行捕获，并在这种情况下路由回登录组件。

@H_404_0@现在路由器的外观如下

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',component: () => import('@/views/DashboardView.vue'),children: [
      {
        path: '/attenders',name: 'Anmeldungen',component: AttendersView,Meta: {
          requiresAuth: true,middleware: log
        }
      },{
        path: '/organizations',name: 'Verbände',middleware: log
        },component: () => import(/* webpackChunkName: "about" */ '../views/OrganizationsView.vue')
      },{
        path: '/workgroups',name: 'Arbeitsgruppen',component: () => import(/* webpackChunkName: "about" */ '../views/WorkgroupsView.vue')
      },{
        path: '/status',name: 'Status',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,next) => {
  if (to.matched.some(record => record.Meta.requiresAuth)) {
    if (store.getters.authorized) {
      next()
      return
    }
    next('/login')
  } else {
    next()
  }
})

export default router

@H_404_0@这是我的自定义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',data: payload
    })
  }

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

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

@H_404_0@现在我正在组件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')
        }
      })
    }

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

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

解决方法

您可以做的是为此任务使用导航护罩：https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

在用户输入要附加身份验证的任何路由之前，您可以先输入“ before”，然后检查其特权。

如果成功则通过next()传递，或将其投入登录。