Vue实现路由守卫的示例代码
作者：一只游鱼
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来实现，详情请看我的博客文章：
在index.Js文件中写入全局守卫：
// 全局前置守卫
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token') // 从本地取 token
if (to.meta.requiresAuth && !token) {
// 如果需要登录且没有 token，就跳到登录页
next({ path: '/' })
} else {
next() // 其他情况放行
}
})在request.Js中添加拦截器：
// 响应拦截器：统一处理 401
request.interceptors.response.use(
(response) => response,
(error) => {
if (error.response && error.response.status === 401) {
localStorage.removeItem("token"); // 清除过期 token
router.push("/"); // 跳转到登录页
}
return Promise.reject(error);
}
);可以试验一下，登录成功进入ai页面后：
打开F12，打开本地存储，将token删除，回到页面，并刷新。。
这时当前端发送的请求头不带token令牌时，后端会返回401，，axois拦截器会拦截到并且退回登录页面：
到此这篇关于Vue实现路由守卫的示例代码的文章就介绍到这了,更多相关Vue 路由守卫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！