博客站

在 Vue 3 中实现权限控制是构建复杂应用的重要部分。权限控制通常涉及路由守卫、动态路由、组件级别的权限控制等。以下是实现权限控制的详细步骤和方法：

1. 路由级别的权限控制

路由级别的权限控制是最常见的权限控制方式，通常通过 路由守卫 来实现。

定义路由

首先，定义应用的路由，并为需要权限控制的路由添加元信息（meta）。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    meta: { requiresAuth: true }, // 需要登录
  },
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
    meta: { requiresGuest: true }, // 仅限未登录用户
  },
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    meta: { requiresAdmin: true }, // 需要管理员权限
  },
];

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

export default router;

全局前置守卫

使用 router.beforeEach 实现全局前置守卫，检查用户权限并决定是否允许导航。

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 检查用户是否登录
  const isAdmin = checkAdmin(); // 检查用户是否是管理员

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 需要登录但未登录，跳转到登录页
    next('/login');
  } else if (to.meta.requiresGuest && isAuthenticated) {
    // 需要未登录但已登录，跳转到首页
    next('/');
  } else if (to.meta.requiresAdmin && !isAdmin) {
    // 需要管理员权限但没有权限，跳转到首页
    next('/');
  } else {
    // 允许导航
    next();
  }
});

2. 动态路由

根据用户权限动态加载路由。例如，管理员可以看到更多的路由，而普通用户只能看到部分路由。

定义动态路由

将路由分为公共路由和权限路由。

// router/index.js
const publicRoutes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
  },
];

const adminRoutes = [
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
  },
];

动态添加路由

在用户登录后，根据权限动态添加路由。

// router/index.js
export function addAdminRoutes() {
  adminRoutes.forEach((route) => {
    router.addRoute(route);
  });
}

在登录逻辑中调用 addAdminRoutes：

// Login.vue
import { addAdminRoutes } from '@/router';

function login() {
  // 登录逻辑
  if (isAdmin) {
    addAdminRoutes();
  }
  router.push('/');
}

3. 组件级别的权限控制

在组件内部根据用户权限控制某些元素的显示或行为。

使用自定义指令

可以通过自定义指令实现组件级别的权限控制。

// directives/hasPermission.js
import { checkPermission } from '@/utils/auth';

export default {
  mounted(el, binding) {
    const { value } = binding;
    if (!checkPermission(value)) {
      el.parentNode.removeChild(el);
    }
  },
};

在组件中使用自定义指令：

<template>
  <div>
    <button v-has-permission="'admin'">Admin Button</button>
  </div>
</template>

<script>
import hasPermission from '@/directives/hasPermission';

export default {
  directives: {
    hasPermission,
  },
};
</script>

使用 v-if 或 v-show

在模板中根据权限控制元素的显示。

<template>
  <div>
    <button v-if="isAdmin">Admin Button</button>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const isAdmin = computed(() => store.state.user.isAdmin);

    return {
      isAdmin,
    };
  },
};
</script>

4. API 请求的权限控制

在发送 API 请求时，根据用户权限决定是否允许请求。

拦截器

在请求拦截器中检查权限。

// utils/axios.js
import axios from 'axios';
import { checkPermission } from '@/utils/auth';

const instance = axios.create();

instance.interceptors.request.use((config) => {
  if (config.requiresAdmin && !checkPermission('admin')) {
    throw new Error('Permission denied');
  }
  return config;
});

export default instance;

在组件中使用：

import axios from '@/utils/axios';

function fetchAdminData() {
  return axios.get('/admin/data', { requiresAdmin: true });
}

5. 总结

在 Vue 3 中实现权限控制的主要方法包括：

1. 路由级别的权限控制：通过路由守卫和动态路由实现。
2. 组件级别的权限控制：使用自定义指令或 v-if、v-show 实现。
3. API 请求的权限控制：通过请求拦截器实现。

通过以上方法，你可以根据用户权限灵活地控制应用的访问权限，确保系统的安全性和用户体验。