前言

在我们玩抖音的时候如果我们没有登录，我们是没有点赞的权限的，如果我们点击爱心，就会跳出登录界面。在其他很多应用中，都设计这种逻辑，那这种逻辑是怎么实现的呢？

可以使用路由守卫去实现这个逻辑。

Vue.js 路由守卫

在 Vue.js 中，路由守卫主要有以下几种：

1. 全局前置守卫: router.beforeEach
2. 全局解析守卫: router.beforeResolve
3. 全局后置守卫: router.afterEach
4. 路由独享守卫: 在路由配置中使用 beforeEnter
5. 组件内守卫: 在组件中使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave

创建和使用路由守卫

我们已经有一个 Vue 项目，并安装了 Vue Router：

npm install vue-router

配置路由守卫：

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import Login from '@/components/Login.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这里可以加入自定义的认证逻辑
    const isAuthenticated = false; // 假设未认证
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

export default router;

在这个例子中，我们使用 router.beforeEach 方法来添加一个全局前置守卫。它会在每次导航时执行，并检查目标路由是否需要认证。如果需要且用户未认证，则重定向到登录页面。

项目搭建

Vue搭建完项目，配置tailwind去加载完样式 json-server模拟后端，导入router

有一个首页和购物车和登录的页面，购物车需要用户登录上以后才能进入，在没有登录上的时候点击购物车会跳转登录页面。

具体实现逻辑

• 使用 createRouter 创建路由器实例。

• history: createWebHashHistory() 指定使用哈希模式的路由历史记录。

• routes 数组定义了路由规则：

  • '/' 路由加载 Home 组件。
  • '/login' 路由加载 Login 组件。
  • '/cart' 路由加载 Cart 组件，并在 meta 对象中添加了 requireAuth: true，表示该路由需要认证。

路由守卫用于在导航到某个路由之前执行一些逻辑，以控制访问权限。这里使用了全局前置守卫 router.beforeEach：

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
        if (localStorage.getItem('isLoggedIn')) {
            next()
        } else {
            next({ path: '/login' })
        }
    } else {
        next()
    }
})

解释：

• router.beforeEach 注册一个全局前置守卫。

• to 是目标路由对象，表示要导航到的路由。

• from 是当前路由对象，表示导航前的路由。

• next 是一个函数，调用它来继续导航。

• 守卫逻辑：

  • 检查目标路由的 meta 属性中是否有 requireAuth。

  • 如果需要认证，则检查 localStorage 中是否存在 isLoggedIn 标记。

    • 如果用户已登录（isLoggedIn 存在），则调用 next() 继续导航。
    • 如果用户未登录，则调用 next({ path: '/login' }) 重定向到登录页面。

  • 如果目标路由不需要认证，则直接调用 next() 继续导航。

言简意赅就是在本地存储中如果存储了你已经登录，守卫就会用next（）把你放行，如果你没登录，就会通过next({ path: '/login' }) 把你赶回登录界面。

总结

路由守卫（Route Guards）用于控制和保护应用中的路由访问权限。它们可以在用户导航到某个路由之前、之后或在路由解析期间执行逻辑。

类型

1. 全局前置守卫: 在每次导航前触发，用于执行认证和授权等逻辑。

   router.beforeEach((to, from, next) => { ... })
   

2. 全局后置守卫: 在每次导航后触发，用于记录日志等操作。

   router.afterEach((to, from) => { ... })
   

3. 路由独享守卫: 在特定路由的配置中定义，用于处理特定路由的访问控制。

   const routes = [
       {
           path: '/example',
           component: ExampleComponent,
           beforeEnter: (to, from, next) => { ... }
       }
   ]
   

4. 组件内守卫: 在组件内部定义，用于处理组件级别的导航控制。

   export default {
       beforeRouteEnter (to, from, next) { ... },
       beforeRouteUpdate (to, from, next) { ... },
       beforeRouteLeave (to, from, next) { ... }
   }
   

功能和目的

• 认证和授权: 确保用户在访问特定路由前已登录或拥有适当权限。
• 数据校验: 在导航前检查数据的有效性或状态。
• 导航控制: 在特定条件下阻止导航或重定向到其他页面。

路由守卫是保护应用安全和控制访问的重要工具，可以确保只有符合条件的用户才能访问受保护的路由。