vue3 + ts 权限管理

权限管理是一个非常重要的方面。通过权限管理，我们可以控制用户对不同功能和资源的访问权限，从而保护系统的安全性和数据的完整性。在本篇博客中，我们将介绍如何使用 Vue 3 和 TypeScript 来实现一个简单的权限管理系统，包括路由权限、页面权限和按钮权限，并给出相应的示例代码。

1. 路由权限控制

在 Vue 3 中，我们可以使用 Vue Router 来管理路由。我们可以在路由配置中添加 meta 字段来定义需要的权限信息。例如，我们可以为每个路由添加 requiresAuth 字段来表示该路由需要登录才能访问，同时可以添加 requiredRoles 字段来表示该路由需要具有特定的角色才能访问。然后，我们可以在全局的路由守卫中进行权限验证，根据用户的登录状态和角色信息来判断是否具有访问权限。如果没有权限，则可以跳转到登录页面或者显示一个 403 页面。

下面是一个示例代码，展示了如何在路由配置中添加权限信息和在路由守卫中进行权限验证：

// router.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { routeGuard } from './permissions';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue'),
    meta: {
      requiresAuth: true,
      requiredRoles: ['admin', 'editor'],
    },
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('./views/Login.vue'),
  },
  {
    path: '/403',
    name: 'Forbidden',
    component: () => import('./views/Forbidden.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(routeGuard);

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在上述代码中，我们定义了三个路由：首页、登录页和 403 页面。首页需要登录并具有 admin 或 editor 角色才能访问。登录页和 403 页面不需要权限验证。

2. 页面权限控制

页面权限控制可以通过在页面组件中使用计算属性来判断用户是否具有访问该页面的权限，然后根据权限来动态显示或隐藏页面内容。我们可以在页面组件中定义一个计算属性 hasAccess，根据用户的角色和权限信息来判断是否具有访问权限。根据计算属性的返回值，我们可以动态显示或隐藏页面内容。

下面是一个示例代码，展示了如何在页面组件中进行页面权限控制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在上述代码中，我们使用计算属性 hasAccess 来判断用户是否具有访问该页面的权限。我们获取了路由的 requiredRoles 字段和用户的角色信息，然后使用 hasRoles 函数来判断用户是否具有访问该页面的角色。根据计算属性的返回值，我们可以动态显示或隐藏页面内容。

3. 按钮权限控制

按钮权限控制可以通过在按钮组件中使用计算属性来判断用户是否具有执行该按钮操作的权限，然后根据权限来动态显示或隐藏按钮。我们可以在按钮组件中定义一个计算属性 hasAccess，根据用户的权限信息来判断是否具有执行该按钮操作的权限。根据计算属性的返回值，我们可以动态显示或隐藏按钮。

下面是一个示例代码，展示了如何在按钮组件中进行按钮权限控制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在上述代码中，我们使用计算属性 hasAccess 来判断用户是否具有执行该按钮操作的权限。我们获取了按钮组件的 requiredPermissions 属性和用户的权限信息，然后使用 hasPermissions 函数来判断用户是否具有执行该按钮操作的权限。根据计算属性的返回值，我们可以动态显示或隐藏按钮。

4. 封装权限控制方法

为了方便使用和管理权限控制，我们可以封装一些方法来处理权限相关的逻辑。例如，我们可以封装一个 hasRoles 方法来判断用户是否具有指定的角色，封装一个 hasPermissions 方法来判断用户是否具有指定的权限。这样，我们可以在页面组件和按钮组件中直接调用这些方法来进行权限控制。

下面是一个示例代码，展示了如何封装权限控制方法：

// permissions.ts
import { RouteLocationNormalized } from 'vue-router';

export function hasRoles(userRoles: string[], requiredRoles: string[]): boolean {
  return requiredRoles.some(role => userRoles.includes(role));
}

export function hasPermissions(userPermissions: string[], requiredPermissions: string[]): boolean {
  return requiredPermissions.every(permission => userPermissions.includes(permission));
}

export function getUserRoles(): string[] {
  // 获取用户的角色信息
  // ...
}

export function getUserPermissions(): string[] {
  // 获取用户的权限信息
  // ...
}

export function routeGuard(to: RouteLocationNormalized, from: RouteLocationNormalized): void {
  const requiresAuth = to.meta.requiresAuth;
  const userRoles = getUserRoles(); // 获取用户的角色信息

  if (requiresAuth && !isLoggedIn()) {
    // 如果需要登录但用户未登录，则跳转到登录页面
    router.push({ name: 'Login' });
  } else if (requiresAuth && !hasRoles(userRoles, to.meta.requiredRoles)) {
    // 如果需要特定角色但用户角色不匹配，则跳转到 403 页面
    router.push({ name: 'Forbidden' });
  } else {
    // 其他情况下，允许访问路由
    next();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在上述代码中，我们封装了 hasRoles 和 hasPermissions 方法来判断用户是否具有指定的角色和权限。我们还封装了 getUserRoles 和 getUserPermissions 方法来获取用户的角色和权限信息。最后，我们封装了 routeGuard 方法来进行路由权限验证，根据用户的登录状态和角色信息来判断是否具有访问权限。

通过以上的步骤，我们实现了一个简单的权限管理系统。当用户访问受限页面时，系统会根据用户的角色和权限信息来判断是否具有访问权限，如果没有权限，则会跳转到登录页面或者显示一个错误页面。在页面中，根据用户的角色和权限信息来动态显示或隐藏页面内容和按钮。