vue后台管理权限控制

最新推荐文章于 2025-05-20 09:08:04 发布

zcm629

最新推荐文章于 2025-05-20 09:08:04 发布

阅读量1.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue2+ 文章标签： vue权限管理

本文链接：https://blog.youkuaiyun.com/weixin_43182021/article/details/86637101

本文探讨了在Vue后台管理系统中实现权限控制的方法，包括页面权限的限制和操作按钮的控制。通过配置路由、提取公用方法、使用Vuex管理状态以及处理数据序列化等手段，实现了灵活的权限管理。此外，还介绍了如何通过指令动态生成导航栏并处理退出操作时的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说到后台管理系统，就免不了涉及到权限的管理。在项目中，主要遇到的有两种，一种是页面的限制，一种操作按钮的限制。

首先我们聊一下页面的权限限制：

一、路由的配置（router—> index.js）

1、不对权限做限制的页面（路由的初始配置）

export const constantRouterMap = [
    {
        path: '/',
        name: 'Login',
        component: Login
    },
    { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
    { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
]


export default new Router({
    // mode: 'history', // 路由开启history模式时，需要进行服务器配置，vue官网有介绍
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})

2、需要根据不同权限生成不同的路由列表

export const asyncRouterMap = [
    {
        path: '/home',
        name: 'home',
        component: Home,
        redirect: {
            name: "index"
        },
        meta: {
            roles: [0, 1, 2],
            isLogin: true
        },
        children: [
            {
                path: 'index',
                name: 'index',
                component: Index,
                meta: {
                    roles: [0, 1, 2]
                }
            },
            {
                path: 'client',
                name: 'client',
                component: Client,
                meta: {
                    roles: [0, 1, 2]
                }
            },
            {
                path: 'resource',
                name: 'resource',
                component: Resoure,