关于作者
还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。
| 热门推荐 | 内容链接 |
|---|---|
| 1 | openlayers 从基础到精通，300+代码示例 |
| 2 | leaflet 热门分解学习教程，150+图文示例 |
| 3 | cesium 从0到1学习指南，200+代码示例 |
| 4 | mapboxGL 从入门到实战，150+图文示例 |
| 5 | canvas 示例应用100+，揭密底层细节 |
| 6 | javascript从基础到高级，示例展示200+ |
| 7 | vue2 实战指南，100+个细节深度剖析 |
在 Vue 中，可以通过路由守卫来实现路由鉴权。Vue 提供了三种路由守卫：全局前置守卫、全局解析守卫和组件内的守卫。
全局前置守卫
通过 router.beforeEach() 方法实现，可以在路由跳转之前进行权限判断。在这个守卫中，可以根据用户的登录状态、角色等信息来判断用户是否有权限访问该路由。如果没有权限，则可以跳转到登录页面或者其他提示页面。
全局解析守卫
通过 router.beforeResolve() 方法实现，可以在路由解析之前进行权限判断。这个守卫可以用于处理异步路由加载的情况，确保在加载路由之前进行权限判断。
组件内的守卫
通过 beforeRouteEnter 、 beforeRouteUpdate 和 beforeRouteLeave 这三个钩子函数实现。这些守卫直接在组件内部定义，并且会在组件的路由导航过程中触发。可以用于执行一些与组件相关的逻辑，例如加载组件的数据、检查组件的状态等。
全局前置守卫代码示例
以下是一个示例代码，展示了如何使用全局前置守卫来限制未登录用户的访问：
const router = new VueRouter({
routes: [
{
path: '/',
component: HomeComponent,
},
{
path: '/login',
component: LoginComponent,
},
],
});
router.beforeEach((to, from, next) => {
// 检查用户是否已登录
if (!isLoggedIn) {
next('/login');
} else {
next();
}
});
在这个示例中，定义了一个全局前置守卫，使用 router.beforeEach() 方法来检查用户是否已登录。如果用户未登录，则导航到登录页面，否则允许继续导航。
全局解析守卫的示例代码
这个示例展示了如何使用 router.beforeResolve() 方法进行权限判断：
router.beforeResolve((to, from, next) => {
// 获取要进入的路由组件
const component = to.matched[0].components.default;
// 进行权限检查
if (hasPermission(component)) {
next();
} else {
// 没有权限，跳转到错误页面或执行其他操作
next('/error');
}
});
在这个示例中，使用 router.beforeResolve() 方法定义了全局解析守卫。通过获取要进入的路由组件，并进行权限检查来确定用户是否有权访问该组件。如果有相应权限，就继续导航；否则，跳转到错误页面或执行其他操作。
请注意，全局解析守卫在路由解析完成后触发，也就是在组件被加载之前。这意味着你可以在守卫中进行更复杂的权限检查，例如检查组件的特定属性或与服务器进行异步验证。
组件内守卫代码示例
在 Vue.js 中，组件内守卫有三个： beforeRouteEnter 、 beforeRouteUpdate 和 beforeRouteLeave 。以下是一个示例代码，展示了如何使用这三种组件内守卫：
export default {
name: 'About',
// beforeRouteEnter 是进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next) {
console.log('About--beforeRouteEnter', to, from)
if (to.meta.isAuth) {
if (localStorage.getItem('school') === 'atguigu') {
next()
} else {
alert('学校名不对，无权限查看!')
}
} else {
next()
}
},
// beforeRouteLeave 是离开守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {
console.log('About--beforeRouteLeave', to, from)
next()
},
// beforeRouteUpdate 是更新守卫，组件被复用（例如从缓存中恢复）时被调用
beforeRouteUpdate(to, from, next) {
console.log('About--beforeRouteUpdate', to, from)
next()
}
}
在上述示例中， beforeRouteEnter 守卫会在进入 About 组件时被调用。如果路由规则中设置了 isAuth 元数据并且本地存储中 school 的值为 atguigu ，则允许进入该组件；否则会弹出一个警告框。 beforeRouteLeave 守卫会在离开 About 组件时被调用，它只是简单地继续执行下一个路由。 beforeRouteUpdate 守卫会在组件被复用（例如从缓存中恢复）时被调用，它也只是简单地继续执行下一个路由。文章来源：https://www.toymoban.com/news/detail-828274.html
请注意，上述示例代码中的 isAuth 元数据和 localStorage.getItem(‘school’) 是自定义的，你可以根据实际需求进行相应的修改。文章来源地址https://www.toymoban.com/news/detail-828274.html
到了这里，关于vue三种路由守卫详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
