权限涉及左侧菜单权限、路由访问权限、页面功能权限、后端访问权限,下面我们逐一介绍它们 ~
左侧菜单安装权限对应展示逻辑在 home.vue 中实现
原理 :
遍历 pages.js 中的所有页面与当前用户权限进行对比,如果当前用于不具备对应页面的操作权限则不记录此菜单数据,从而不展示左侧导航中对应的菜单。
当前用户权限以 json 形式存储在本地数据中 :
此权限数据应存储在服务端,当用户登录成功时利用 api 接口返回给本地,并记录在当前登录用户的浏览器本地会话数据内。
路由通过路由拦截器进行权限检查,代码位置 : /src/config.js,真实项目请以此为基础进行改进 :
通过路由 path 信息与当前用户权限数据进行比对,当用户不具备对应路由操作权限时返回 false 阻止路由跳转。
在配置页面权限时我们可以通过附加权限配置非菜单类的页面及功能权限 :
然后在页面中根据权限决定是否展示某个具体的功能 :
checkAuthority() 函数被封装在列表页面基础 js 内,通过 当前页面路径+功能 与 当前用户权限进行比较,返回 true 或者 false,从而达到是否展示某个页面功能的目的。