基于Vue实现微信三公棋牌网站搭建后台系统权限控制
2018-03-02 21:29
1561 查看
基于微信三公棋牌网站搭建系列(Q1687054422) + Element UI 的后台系统权限控制
项目背景:现有一个后台管理系统,共存在两种类型的人员
①超级管理员(称作admin),②普通用户(称作editor)每种类型的人看到的操作栏并不一样,可以进行的操作也不尽相同,于是就需要程序处理一下各个权限问题。
过程说难不难,说简单不算简单
【迷茫的前期】上百度、Google,狂搜了好多关于权限的问题,也许是仁者见仁智者见智吧,五花八门的介绍让自己更加迷茫不堪,真心不知道从哪里下手:
1)让后端返回关于权限的json数据吧,但却不太懂这样的数据应该怎样处理;
2)在前端路由那里处理,可是不明白应该怎样使用何种属性来实现这个功能;
【最后】最后看到一篇文章 手摸手,带你用vue撸后台 系列二(登录权限篇) ,但是发现代码非常多权限功能是整合在框架里面的,伤心,我就想实现一个小小的权限功能,没办法还是仔细的研究了起来。
具体实现思路
1 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。2 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。
3 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
4 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。
<font color=red size=4 face="黑体">是不是有点懵没关系下面我尽量用通俗点的话来讲每一步</font>
1在路由router.js里面声明权限为admin的路由(异步挂载的路由asyncRouterMap)
// router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export const constantRouterMap = [ { path: '/', redirect: '/login', hidden: true }, { path: '/login', name: '登录页面', hidden: true, component: resolve => require(['../views/login/Login.vue'], resolve) }, { path: '/Readme', // name: 'Readmehome', index: 'Readme', meta: { title: 'Readme', icon: 'el-icon-menu' }, component: resolve => require(['../components/common/Home.vue'], resolve), children: [ { name: 'Readme', path: '/', meta: { title: 'Readme', icon: 'el-icon-menu' }, component: resolve => require(['../components/page/Readme.vue'], resolve) } ] } ] export default new Router({ routes: constantRouterMap }) // 异步挂载的路由 // 动态需要根据权限加载的路由表 export const asyncRouterMap = [ { path: '/permission', // name: 'permissionhome', meta: { title: 'permission', icon: 'el-icon-setting', roles: ['admin'] }, component: resolve => require(['../components/common/Home.vue'], resolve), children: [ { name: 'permission', path: '/permission', meta: { title: 'permission', icon: 'el-icon-menu', roles: ['admin'] }, component: resolve => require(['../components/page/permission.vue'], resolve) } ] }, { path: '*', redirect: '/404', hidden: true } ]
相关文章推荐
- 基于Vue实现后台系统权限控制的示例代码
- 基于Vue实现后台系统权限控制
- 基于Vue实现后台系统权限控制
- [置顶] 基于Vue实现后台系统权限控制
- linux系统搭建小型FTP服务,实现Windows控制权限
- angular基于ui-router实现系统权限控制
- 微信管理系统基于Flask+Vue+Celery+SQLAlchemy+Redis等实现
- yii2搭建完美后台并实现rbac权限控制案例--之左侧菜单子级无法高亮的问题
- Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制
- .net core 同时实现网站管理员后台、会员、WebApi登录及权限控制
- 基于Flask实现后台权限管理系统 - 高清图
- 高级权限管理系统的设计---- 基于角色+模块的权限控制管理实现
- yii2搭建完美后台并实现rbac权限控制实例教程
- 前后端分离实践:基于vue实现网站前台的权限管理
- 基于Flask实现后台权限管理系统 - Flask
- 基于Flask实现后台权限管理系统 - 导言
- yii2搭建完美后台并实现rbac权限控制案例 - 之权限控制详细操作步骤
- Yii2搭建后台并实现rbac权限控制完整实例教程
- yii2搭建完美后台并实现rbac权限控制
- Yii2搭建后台并实现rbac权限控制完整实例教程