vue-路由守卫+token过期处理

最新推荐文章于 2024-08-16 18:42:25 发布

moxiaoxiao520

最新推荐文章于 2024-08-16 18:42:25 发布

阅读量5.5k

点赞数 11

分类专栏： Vue 文章标签： vue

本文为博主学习笔记，欢迎大家收藏学习

本文链接：https://blog.csdn.net/qq_21161977/article/details/112390177

版权

本文介绍了如何在Vue项目中利用路由守卫实现用户登录验证，确保只有登录成功的用户才能访问系统。同时，通过配置请求和响应拦截器，详细讲解了当Token过期时如何进行处理，包括添加请求头和判断并处理401状态码，以实现在Token失效时清理缓存的Token。

摘要由CSDN通过智能技术生成

路由守卫

想要实现只有在登录或者注册成功的状态下，才能进入系统，这时候就可以使用路由守卫

配置路由守卫

在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，