当前位置：首页 > news >正文

Vue实现路由守卫

news 2025/9/21 5:59:51

Vue实现路由守卫

一、概念

路由守卫（Navigation Guards）本质上就是 在路由跳转前后，拦截用户导航并做一些逻辑处理的钩子函数。
常见用途有：

鉴权控制：比如没有登录就不允许进入某些页面。
数据预加载：在进入某个页面前，提前拉取数据。
页面跳转控制：比如离开页面前弹出“是否保存更改”的提示。

简单理解：路由守卫就是 Vue Router 提供的一种“钩子函数”，用来控制页面导航的行为。

二、类型

Vue Router 提供了三类守卫：

（1）全局守卫

对所有路由跳转都生效。

// 全局前置守卫router.beforeEach((to, from, next) => {const token = localStorage.getItem('token')if (to.meta.requiresAuth && !token) {// 需要登录，但没 token，跳转到登录next('/login')} else {next()}})// 全局后置守卫（一般用来修改标题等）router.afterEach((to) => {document.title = to.meta.title || '默认标题'})export default router

（2）路由独享守卫

只针对某一个路由生效。

{path: '/profile',component: () => import('@/views/Profile.vue'),beforeEnter: (to, from, next) => {const token = localStorage.getItem('token')if (!token) {next('/login')} else {next()}}}

（3）组件内守卫

直接写在组件里，对进入/离开当前组件生效。

export default {name: 'Profile',// 进入当前组件之前beforeRouteEnter(to, from, next) {console.log('即将进入 Profile 页面')next()},// 路由更新（比如 /profile/1 -> /profile/2）beforeRouteUpdate(to, from, next) {console.log('路由参数变化，更新页面数据')next()},// 离开当前组件时beforeRouteLeave(to, from, next) {const answer = window.confirm('确定要离开吗？未保存的数据会丢失')if (answer) {next()} else {next(false) // 阻止导航}}}

三、实战

以下为作者的演示：

全局守卫
如果token过期或token错误会返回到登录页面

注意：以上效果需要配合JWT来实现，详情请看我的博客文章：

JWT令牌-CSDN博客

在index.Js文件中写入全局守卫：

// 全局前置守卫router.beforeEach((to, from, next) => {const token = localStorage.getItem('token') // 从本地取 tokenif (to.meta.requiresAuth && !token) {// 如果需要登录且没有 token，就跳到登录页next({ path: '/' })} else {next() // 其他情况放行}})

在request.Js中添加拦截器：

// 响应拦截器：统一处理 401request.interceptors.response.use((response) => response,(error) => {if (error.response && error.response.status === 401) {localStorage.removeItem("token"); // 清除过期 tokenrouter.push("/"); // 跳转到登录页}return Promise.reject(error);});

可以试验一下，登录成功进入ai页面后：