vue router js 权限控制

在 Vue Router 中实现权限控制的一般思路是在路由配置中设置 meta 字段，并在路由跳转时根据用户权限判断是否允许跳转。以下是一个简单的示例：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        requiresAuth: true, // 访问该路由需要登录
        requiresAdmin: false // 访问该路由需要管理员权限
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      meta: {
        requiresAuth: true,
        requiresAdmin: true // 访问该路由需要管理员权限
      }
    }
  ]
});

// 导航守卫
router.beforeEach((to, from, next) => {
  // 判断路由是否需要登录权限
  if (to.meta.requiresAuth) {
    // 判断是否已登录
    const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true';
    if (isAuthenticated) {
      // 判断路由是否需要管理员权限
      if (to.meta.requiresAdmin) {
        // 判断是否为管理员
        const isAdmin = localStorage.getItem('isAdmin') === 'true';
        if (isAdmin) {
          next();
        } else {
          next('/'); // 没有权限，跳转到首页
        }
      } else {
        next();
      }
    } else {
      next('/login'); // 没有登录，跳转到登录页
    }
  } else {
    next();
  }
});

export default router;

上面的代码中，我们在路由配置中设置了 meta 字段，用于表示该路由是否需要登录和管理员权限。在导航守卫中，我们在路由跳转前判断当前路由是否需要权限，如果需要，判断用户是否已登录和是否为管理员，根据判断结果进行跳转。在这里，我们使用了 localStorage 存储登录状态和管理员权限，实际项目中可以根据具体情况进行修改。