vue3前端权限路由

Vue 3前端权限路由是指在Vue 3应用程序中根据用户的角色和权限动态配置和管理路由的能力。这通常涉及到在用户登录后，根据用户的权限信息来决定用户可以访问哪些页面。下面是一种实现Vue 3前端权限路由的基本方法：

1. **路由配置**：首先定义路由配置，区分不同权限等级的路由组。比如，公开路由、用户路由和管理员路由。

2. **用户角色和权限**：用户登录后，服务器返回用户的权限信息，前端根据这些权限信息来决定最终用户的访问权限。

3. **动态路由添加**：使用Vue Router的`addRoute`方法动态添加用户有权限访问的路由。如果没有权限，则不添加。

4. **权限验证**：在路由导航守卫（例如`beforeEach`）中进行权限验证，如果用户没有访问该路由的权限，则进行重定向。

5. **导航栏和菜单生成**：根据用户的权限动态生成导航栏和菜单，只显示用户有权限访问的菜单项。

下面是一个简单的示例代码：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import UserPage from '../views/UserPage.vue';
import AdminPage from '../views/AdminPage.vue';

// 路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user',
    name: 'UserPage',
    component: UserPage,
    meta: { requiresAuth: true, role: 'user' }
  },
  {
    path: '/admin',
    name: 'AdminPage',
    component: AdminPage,
    meta: { requiresAuth: true, role: 'admin' }
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

// 路由导航守卫
router.beforeEach((to, from, next) => {
  const user = JSON.parse(localStorage.getItem('user')); // 假设用户信息存储在localStorage中
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (user) {
      if (to.meta.role && user.role !== to.meta.role) {
        next({ name: 'Home' }); // 没有权限访问
      } else {
        next(); // 有权限访问
      }
    } else {
      next({ name: 'Home' }); // 未登录重定向到首页
    }
  } else {
    next();
  }
});

export default router;