若依-CFANZ编程社区

@toc

一：故事背景

最近在研究权限系统。秉承着站在巨人的肩膀上的原则，去学习了若依的权限项目。这里选用的是前后端分离版。去研究了界面的控制和页面内元素的控制。查看了其具体的实现方法，将其总结到这里。

二：具体权限控制

若依权限控制主要分为两大部分，第一部分是页面的控制，第二部分是页面上具体元素的控制。

若依_ico

在若依的系统中，菜单管理内可以看到所有元素。元素分为两种。一种是页面，另外一种是元素是页面内的具体元素。
无论是哪种元素，我们都可以自定义对应的 权限标识，通过权限表示来表示用户有没有具体的权限。

2.1 页面权限控制

页面权限控制是通过动态路由的方式进行的配置，我们从前端到后端，整个流程看一下其实现动态路由的整个过程

src目录下的permission文件，这里代码意思是VueRouter中的全局前置守卫，用于在路由切换前执行一些逻辑操作。首先判断用户已经登录，有对应的token，然后去拉取用户的信息，拉去完之后去触发 Vuex的GenerateRoutes方法，去后端拉取具体的路由信息
上文所述的 Vuex的GenerateRoutes方法定义在 src.store.modules.permission.js 文件内，注意和上面的文件区分，二者目录不同这部分代码，去后端查询了用户具有的路由权限等信息，将生成的可访问的路由配置作为 Promise 的结果返回。返回之后，第一部分的代码将可访问的路由动态的配置到了 Vue Router 中。
下面是请求路由数据返回的数据结构

{
    "msg": "操作成功",
    "code": 200,
    "data": [
        {
            "name": "System",
            "path": "/system",
            "hidden": false,
            "redirect": "noRedirect",
            "component": "Layout",
            "alwaysShow": true,
            "meta": {
                "title": "系统管理",
                "icon": "system",
                "noCache": false,
                "link": null
            },
            "children": [
                {
                    "name": "User",
                    "path": "user",
                    "hidden": false,
                    "component": "system/user/index",
                    "meta": {
                        "title": "用户管理",
                        "icon": "user",
                        "noCache": false,
                        "link": null
                    }
                },
                {
                    "name": "Role",
                    "path": "role",
                    "hidden": false,
                    "component": "system/role/index",
                    "meta": {
                        "title": "角色管理",
                        "icon": "peoples",
                        "noCache": false,
                        "link": null
                    }
                },
                {
                    "name": "Menu",
                    "path": "menu",
                    "hidden": false,
                    "component": "system/menu/index",
                    "meta": {
                        "title": "菜单管理",
                        "icon": "tree-table",
                        "noCache": false,
                        "link": null
                    }
                },
                {
                    "name": "Dept",
                    "path": "dept",
                    "hidden": false,
                    "component": "system/dept/index",
                    "meta": {
                        "title": "部门管理",
                        "icon": "tree",
                        "noCache": false,
                        "link": null
                    }
                },
                {
                    "name": "Post",
                    "path": "post",
                    "hidden": false,
                    "component": "system/post/index",
                    "meta": {
                        "title": "岗位管理",
                        "icon": "post",
                        "noCache": false,
                        "link": null
                    }
                },
                {
                    "name": "Dict",
                    "path": "dict",
                    "hidden": false,
                    "component": "system/dict/index",
                    "meta": {
                        "title": "字典管理",
                        "icon": "dict",
                        "noCache": false,
                        "link": null
                    }
                }
            ]
        }
    ]
}