Vue项目中使用vue-router导航钩子实现权限控制

"本文主要探讨了Vue.js框架中vue-router的导航钩子，也称为导航守卫，如何在路由变化时执行特定操作，如验证用户访问权限。文章着重讲解了全局守卫`router.beforeEach`的使用方法和场景，并详细阐述了`next`函数的不同调用方式。" 在开发Vue应用时，vue-router作为官方推荐的路由管理器，提供了丰富的导航控制功能，其中包括导航钩子。这些钩子允许我们在路由变化过程中进行拦截、跳转或者取消导航。导航钩子分为全局、组件级和路由独享三种类型，而全局守卫则是最常见的应用之一。 全局守卫中最常用的是`router.beforeEach`，它会在每次路由切换前触发。在定义这个钩子时，我们需要传入三个参数：`to`（即将进入的路由）、`from`（当前路由）和`next`（决定导航下一步如何进行的函数）。`next`函数的调用方式决定了导航的流向： 1. `next()`：无条件地进入下一个钩子，如果已经到达所有钩子的末尾，就会开始导航至目标路由。 2. `next(false)`：阻止当前导航，保持当前路由不变。这通常用于当某些条件未满足时中断导航。 3. `next('/xxx')` 或 `next({ path: '/xxx' })`：强制跳转到指定的路径。这可以用来重定向用户到其他页面。 4. `next(error)`：如果传入的是一个Error实例，导航将被中断，并且错误会被传递给`router.onError()`注册的回调，用于错误处理。 下面是一个简单的例子，展示了如何使用`router.beforeEach`来检查用户是否已登录，如果没有登录则重定向到登录页面： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import { getToken } from '@Utils/session.utils' // 获取登录用户的token import Login from '../pages/Login.vue' // 引入登录页 import Home from '../pages/Home.vue' // 引入首页 Vue.use(VueRouter) // 全局注入router // 配置路由参数 const routes = [ { path: '/login', name: 'login', component: Login }, { path: '/home', name: 'home', component: Home } ] const router = new VueRouter({ routes }) // 全局挂载路由导航守卫：验证用户是否登录 router.beforeEach((to, from, next) => { const token = getToken() if (!token && to.name !== 'login') { next('/login') // 用户未登录，重定向到登录页 } else { next() // 用户已登录或访问登录页，继续导航 } }) ``` 在这个例子中，`getToken()`函数用于获取存储在浏览器中的用户登录状态（例如JWT令牌）。如果用户没有登录并且试图访问非登录页，我们将他们重定向到登录页。反之，如果用户已登录或正在访问登录页，我们就允许他们继续导航。 vue-router的导航钩子是实现复杂路由逻辑的关键工具，例如权限控制、数据预加载等。通过合理利用这些钩子，开发者可以创建出更安全、更具有用户体验的单页应用。