vue+elementui搭建后台管理界面(6登录和菜单权限控制)
不同的权限对应不同的路由(菜单),同时侧边栏也根据权限异步生成,实现登录和鉴权思路如下:
- 登录:点击登录,服务器验证通过后返回一个 token ,然后存到 cookie,再根据 token 拉取用户权限
- 鉴权:通过 token 获取对应的roles, 计算有权限的路由,使用 router.addRoutes 动态加载路由
数据和操作通过 vuex 进行控制
1 登录
登录按钮 click 事件触发登录动作:
/** ...省略的代码 */
this.$store.dispatch('LoginByUsername', {'username': username, 'password': password
})
.then(() => {this.logining = falsethis.$notify.success({message: '欢迎登录',duration: 3 * 1000,})// 重定向到首页this.$router.push({ path: this.redirect || '/' })
})
.catch(err => {this.logining = falsethis.$alert(err, {type: 'warning',confirmButtonText: 'ok'})
})
/** ...省略的代码 */
action:
// 登入
LoginByUsername({commit }, userInfo){const username = userInfo.username.trim()return new Promise((resolve, reject) => {loginByUsernameApi(username, userInfo.password).then(response=> {const data = response.datasetToken(data.token) // 储存tokencommit('SET_TOKEN', data.token)commit('SET_ACCOUNT', username)resolve()}).catch(err => {reject(err)})})
}
/** ...省略的代码 */
登录成功,服务端返回一个token,然后储存到本地 cookie。
2 获取用户权限
对每个路由,在全局钩子 router.beforeEach 中拦截,判断是否已获取token,之后再获取用户的基本信息
/** ...省略的代码 */
if(store.getters.token) {// 判断当前用户是否已拉取完user_info信息if(store.getters.roles.length === 0){// 拉取用户信息store.dispatch('GetUserInfo').then(resp => {const roles = resp.data.rolesnext()/** ...省略的代码 */})})}
}
/** ...省略的代码 */
action:
// 获取用户信息, 名称、头像、权限
GetUserInfo({commit, state}) {return new Promise((resolve, reject) => {getLoginUserInfoApi(state.token).then(response => {if(!response.data){reject('error')}const data = response.dataconst roles = data.dataif(roles && roles.length > 0){commit('SET_ROLES', roles)}else {reject()}if(data.name){commit('SET_NAME', data.name)}if(data.avatar){commit('SET_AVATAR', data.avatar)}response.data.roles = rolesresolve(response)}).catch(err => {reject(err)})})
},
3 菜单权限
前端保存一份路由表,记录每一个路由和需要的权限。
再根据用户信息里的 roles 计算对应的权限,然后生成有权限的菜单,再挂载路由。
但这只是页面控制,后端也要相应的做权限验证。
- 创建vue实例时使用vue-router挂载登录和一些公用页面,如首页、图表等
- 用户登录后,将获取的roles和路由表的权限比较,生成用户可访问的路由表
- 调用router.addRoutes添加可访问的路由
- 使用vuex管理路由表,生成侧边栏菜单
首先是 router.js 路由表
import Vue from 'vue'
import Router from 'vue-router'
import Container from '@/containers/Container'
import Login from '@/views/login'
import Page404 from '@/views/404'
import Dashboard from '@/views/dashboard'/** router modules */
import systemRouter from './modules/system'Vue.use(Router)export const constantRouterMap = [{path: '/login',hidden: true,component: Login},{path: '/404',hidden: true,component: Page404},{path: '/',redirect: '/dashboard',component: Container,name: '首页',hidden: false,meta: { title: '首页', icon: '', noCache: true },children: [{path: 'dashboard',name: 'Dashboard',component: Dashboard,meta: { title: '首页', icon: 'fa fa-dashboard fa-lg', noCache: true }},{path: 'table',name: '表格综合实例',component: Form,meta: { title: '表格综合实例', icon: '', noCache: true }},// { path: '*', redirect: '/404', hidden: true }]},
]export default new Router({mode: 'hash',scrollBehavior: () => ({ y: 0 }),routes: constantRouterMap
})export const asyncRouterMap = [/** 其他的异步路由表 */systemRouter,{ path: '*', redirect: '/404', hidden: true }
]
同级目录下的 ./modules/system.js 路由表
import Container from '@/containers/Container'
/*** 系统管理相关路由*/
const systemRouter = {path: '/system',component: Container,redirect: '/system/permit/account',name: '系统管理',meta: {title: '系统管理',roles: ['/system']},children: [{path: 'permit',name: '权限管理',hidden: false, redirect: '/system/permit/account',component: () => import('@/views/system/permit'),meta: { title: '权限管理', icon: 'fa fa-cog fa-lg',roles: ['/system/permit'] },children: [{ path: 'account', name: '用户', component: () => import('@/views/system/permit/account'), meta: { title: '用户', icon: 'form', roles: ['/system/permit/account'] } },{ path: 'accountgroup', name: '用户组', component: () => import('@/views/system/permit/accountgroup'), meta: { title: '用户组', icon: 'form', roles: ['/system/permit/accountgroup'] } },{ path: 'role', name: '角色', component: () => import('@/views/system/permit/role'),meta: { title: '角色', icon: 'form', roles: ['/system/permit/role'] } },{ path: 'authorize', name: '授权', component: () => import('@/views/system/permit/authorize'),meta: { title: '授权', icon: 'form', roles: ['/system/permit/authorize'] } },]},],
}export default systemRouter
roles: ['/system/permit/account'] 表示该页面需要的权限是 '/system/permit/account' 后端返回的 roles 里有这个记录则能访问对应的页面
而 '/system/permit/account' 是 '/system/permit' 的子路由,所以要访问 '/system/permit/account',后端返回:
roles: ['/system', '/system/permit', '/system/permit/account']
注意: 404页面要最后加载,如果放在 constantRouterMap 中,所有后面的页面都会被拦截到404
转载于:https://www.cnblogs.com/wbjxxzx/p/10075077.html
vue+elementui搭建后台管理界面(6登录和菜单权限控制)相关推荐
- vue+elementui搭建后台管理界面-登录
1 node环境安装 从 node官网下载安装包 2 vue-cli npm install vue-cli -g 3 新建项目 vue init webpack vue-project 可保持默认, ...
- vue+elementui搭建后台管理界面(登录)
转载 https://www.cnblogs.com/wbjxxzx/p/9942648.html
- vue+antd搭建后台管理界面模版(PC端),适配中文、英文、日文 mock数据,开箱即用
vue+antd搭建后台管理界面模版(PC端) 完整代码下载地址:vue+antd搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES ...
- easyexcel根据模板写入_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员 灿若星空[1] 写作而成,欢迎加入图雀社区,一起创作精彩的免费技术教程,予力编程行业发展. 写在前面 此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目 ...
- element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面 此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...
- 用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员 灿若星空 写作而成,欢迎加入图雀社区,一起创作精彩的免费技术教程,予力编程行业发展. 写在前面 此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经 ...
- post json后台处理数据_用 Vue+ElementUI 搭建后台管理极简模板
写在前面 此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建好了一个后台管理系统的基础框架,教你如何在此基础上快速开发自己的后台管理系统,能让读者能在掌握一些基础 ...
- Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板 技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等 页面预览: ...
- Easyui 搭建后台管理界面
Easyui是目前后台管理界面使用比较流行的框架. 以下是我个人初学Easyui api后搭建的后台管理界面. 框架使用jquery-easyui-1.5.3 首页main.jsp代码,主要使用eas ...
- VUE搭建后台管理界面
后台管理 一.前言 二.依赖配置 三.koa框架 四.数据库 五.路由 六.前端界面 6.1 登录界面 6.2 注册界面 6.3 展示界面 七.阿里云部署 7.1 前端项目 7.2 后端node 7. ...
最新文章
- 《Linux总线、设备与驱动》USB设备发现机制
- streak10刷Linux,streak 10
- 效率极低人群的七大习惯你占了几项?
- mysql之对视图的操作
- 201621123080《Java程序设计》第十一周学习总结
- 揭秘!业界创新的代码仓库加密技术
- 将输入流读取成String后返回
- Progressive Scramble 复杂模拟
- C++ main函数中参数argc和argv相关定义与研究
- java 多线程内存模型
- 数据结构1800题-错题集-第一章
- 十六、算术编码_2、算术编码举例实现
- 课后作业三:软件分析与用户体验分析
- 《结构思考力》- 书摘整理
- 嵌入式实践教程--Android HAL自定义HAL代码教程
- SQL 限定返回行数
- HTTP 和 DNS 原理概念了解 ;
- 海思hi3518用eclipse采用交叉编译器编译程序在海思开发板上运行
- 弥散张量成像(diffusion tensor imaging,DTI)常用指标
- 画论56 恽格《南田画跋》