Vue权限控制

在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问。
路由信息

routes: [
    {
 path: '/login',
 name: 'login',
 meta: {
     roles: ['admin', 'user']
 },
 component: () => import('../components/Login.vue')
    },
    {
 path: 'home',
 name: 'home',
 meta: {
     roles: ['admin']
 },
 component: () => import('../views/Home.vue')
    },
]

页面控制

// 假设角色有两种：admin 和 user
// 这里是从后台获取的用户角色
const role = 'user'
// 在进入一个页面前会触发 router.beforeEach 事件
router.beforeEach((to, from, next) => {
    if (to.meta.roles.includes(role)) {
 next()
    } else {
 next({path: '/404'})
    }
})

1.登录时将 权限名称存在localStorage中
2.配置路由时先将公共的路由信息配置好

const router = new Router({
    routes: [
 path: '/',
 name: 'home',
 component: () => import('Home.vue')
    ]   
})

3.根据localStorage中存储的权限名称，再根据

router.addRoutes(routes: Array)

添加其他路由

router.addRoutes([
    {
 path: '/login',
 name: 'login',
 component: () => import('../components/Login.vue')
    }
])