【DAY20240913】掌握 Vue.js 全局路由守卫：轻松实现全站权限控制！

---

一、全局路由拦截

在Vue.js应用中，全局路由拦截通过Vue Router实现，可以在用户导航到目标页面之前执行逻辑，如*权限验证、数据预加载或日志记录。
Vue Router提供三种全局守卫：beforeEach在每次路由变化前调用，用于验证权限或检查状态；beforeResolve在组件内的守卫解析后、导航确认前调用，适合数据处理；afterEach在每次路由变化后调用，用于记录页面访问等。
例如，通过beforeEach守卫可以检测目标路由是否需要身份验证，如果用户未登录，则重定向到登录页面，已登录则继续导航。通过这些守卫，开发者可以有效地控制页面访问，提升应用的安全性和用户体验
下面以身份验证为例进行演示：

新建登陆页面

新建order组件–订单

步骤同登陆页面同理：
加个order组件，目的是设置不让order和center组件不登陆不让看

next()函数放行

next() 是一个函数，必须在 beforeEach中调用，以决定接下来导航的行为：

1. next()：无参数调用表示直接放行，即允许导航继续，进入目标路由。
2. next(false)：取消当前导航，停留在原位置
3. next(‘/login’) 或 next({ path: ‘/login’ })：带参数调用表示重定向到指定的路径。

• 注意：beforeEach表示全局前置守卫

// 一个简单示例
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果目标路由需要身份验证
    if (!store.state.isAuthenticated) {
      // 如果用户未登录，重定向到登录页面
      next('/login');
    } else {
      // 如果已登录，放行导航
      next();
    }
  } else {
    // 如果不需要身份验证，直接放行
    next();
  }
});

实践思路：

对于需要身份验证的如何处理呢？
需要授权的的几个地方，修改index.js，都加一个meta line 52 line 59。meta叫路由元。
对于需要身份验证的路由，可以使用 meta 字段（路由元信息）来标识哪些路由需要授权【index.js文件中】，然后在全局前置守卫（beforeEach）中根据这个 meta 属性来判断用户是否有权限访问该路由。

然后会来判断meta里的这个属性，如果没有这个属性自然就是false。line80

若需要身份验证，那我们看是否有token，有token就是授权了。 line82

没有token，跳到登陆页面。

点击登录，line 4 line10 一点登录就赋给token。此时有了token再进行跳转，这时候就可以跳转到center了。

二、参考

【1】 https://b23.tv/Hhfpaz2