Vue3+Ts实现路由守卫

前言

博主本期主要讲解的是Vue3如何实现特定路由的路由守卫。那么好，本期正式开始。

路由守卫是啥

路由守卫其实是前端为了防止用户通过路由访问到它不能被访问的页面，这一点可以在后端实现，也可以通过前端实现，那么前端实现的方式之一就是路由守卫。

• 场景一：当用户没有登录，但是通过路由想调用首页。路由守卫就可以在next进入路由前，进行校验操作。
• 场景二：当用户登录成功，同时他知道管理员的某个导航栏路由，想通过该路由进入管理员页面，实现越权操作，那么也可以通过路由守卫进行拦截操作。

总的来说，路由守卫就是为了防止未登录的用户进入页面或用户越权行为出现。出现的一种机制，这种机制就是在跳转路由前，可以进行通过自定义函数进行校验，校验成功后再成功跳转。否则就会跳转回原页面。

实现方式

基于上文所讲我们了解到，是用来校验用户是否登录和用户权限两个问题，而基于此，路由守卫又分为两种方式：

第一种：全局守卫

顾名思义，全局守卫的意思是除了登录外所有组件跳转前都需要校验。通俗来说就是，确认用户或管理员是否登录。
举例说明：
首先我们在router文件夹下的index.ts文件中导入相关依赖。

import { NavigationGuardNext, RouteLocationNormalized, RouteLocationNormalizedLoaded, Router } from 'vue-router';

导入成功后，我们使用下述代码实现校验功能

router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded, next: NavigationGuardNext) => {

  // 检查用户是否登录
  const isAuthenticated = checkLogin(); // 自定义函数，检查用户是否已登录

  if (to.name !== 'login' && !isAuthenticated) {
    // 如果未登录且目标路由不是登录页，导航到登录页
    next({ name: 'login' });
  } else {
    // 如果已登录或目标路由是登录页，继续导航
    next();
  }
});

在上述代码中，我们发现router.beforeEach就是全局守卫的定义名，在方法体中，我们首先通过自定义函checkLogin数来判断用户是否登录，checkLogin要根据自身项目来判断，可以用sessionStorage来进行是否登录数据存储，也可以通过token等值进行校验，这里就不赘述了。下一步就是判断这个名称是否不是登陆页且checkLogin的返回值是false，如果是，则跳转回login，也就是登录页面，如果不是则成功跳转。

以上是第一种全局守卫，第二种就是局部路由

第二种:局部守卫

局部路由实际就是对某些特定的组件进行路由守卫，比如我有三个角色，而这三个角色看到的页面是不同的，他们之间不能互相看到各自的页面，那么就可以使用路由守卫。

也是和第一种一样，需要导入依赖。

import { NavigationGuardNext, RouteLocationNormalized, RouteLocationNormalizedLoaded, Router } from 'vue-router';

然后需要在组件中用beforeEnter方法来实现路由守卫。

{
    path: '/moneyManager',
    name: 'moneyManager',
    component: moneyManager,
    beforeEnter: (to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded, next: NavigationGuardNext) => {
      const hasPermission = checkUserPermission(); // 自定义函数，检查用户权限

      if (hasPermission!='0') {
        next({ name: 'login' }); // 例如，导航到登录
      } else {
        next();
      }
    }
  },

主要是自定义方法不同，可以给大家看下我写的自定义方法。

function checkUserPermission(){
  if(!sessionStorage.getItem('role')){
    return -1;
  }
  return sessionStorage.getItem('role');
}

这里我是通过在登录时像sessionStorage传入一个role值，用role是否存在判断登录是否成功，用role等于几判断它是哪种角色。

以上就是本文的全部内容。