Vue实现权限管理的方法

一、接口权限

一般使用jwt验证接口权限，登录后拿到token，并将token保存起来，再使用axios拦截器进行拦截，每次请求时头部携带token，如果没有则返回401，跳转到登录页面重新登录。

axios.interceptors.request.use(config => {config.headers['token'] = cookie.get('token')return config
})
axios.interceptors.response.use(res=>{},{response}=>{if (response.data.code === 40099 || response.data.code === 40098) { //token过期或者错误router.push('/login')}
})

后面会专门出一片文章讲解jwt。

二、路由权限控制

初始化的时候先挂载不需要权限控制的路由，比如登录页，404等错误页。如果用户通过URL进行强制访问，则会直接进入404，相当于从源头上做了控制。

登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由。

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookieNProgress.configure({ showSpinner: false })// NProgress Configuration// permission judge function
function hasPermission(roles, permissionRoles) {if (roles.indexOf('admin') >= 0) return true // admin permission passed directlyif (!permissionRoles) return truereturn roles.some(role => permissionRoles.indexOf(role) >= 0)
}const whiteList = ['/login', '/authredirect']// no redirect whitelistrouter.beforeEach((to, from, next) => {NProgress.start() // start progress barif (getToken()) { // determine if there has token/* has token*/if (to.path === '/login') {next({ path: '/' })NProgress.done() // if current page is dashboard will not trigger  afterEach hook, so manually handle it} else {if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息store.dispatch('GetUserInfo').then(res => { // 拉取user_infoconst roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record})}).catch((err) => {store.dispatch('FedLogOut').then(() => {Message.error(err || 'Verification failed, please login again')next({ path: '/' })})})} else {// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓if (hasPermission(store.getters.roles, to.meta.roles)) {next()//} else {next({ path: '/401', replace: true, query: { noGoBack: true }})}// 可删 ↑}}} else {/* has no token*/if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入next()} else {next('/login') // 否则全部重定向到登录页NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it}}
})router.afterEach(() => {NProgress.done() // finish progress bar
})

三、菜单权限

可以理解为菜单和路由解耦

方案一

菜单与路由分离，菜单由后端返回

方案二

菜单和路由都由后端返回，前端统一定义路由组件

代码有丶麻烦，改天再研究一下

四、按钮权限

方案一

直接通过v-if判断

方案二

通过自定义指令进行按钮权限的判断

首先配置路由

{path: '/permission',component: Layout,name: '权限测试',meta: {btnPermissions: ['admin', 'supper', 'normal']},//页面需要的权限children: [{path: 'supper',component: _import('system/supper'),name: '权限测试页',meta: {btnPermissions: ['admin', 'supper']} //页面需要的权限},{path: 'normal',component: _import('system/normal'),name: '权限测试页',meta: {btnPermissions: ['admin']} //页面需要的权限}]
}

定义权限指令

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {bind: function (el, binding, vnode) {// 获取页面按钮权限let btnPermissionsArr = [];if(binding.value){// 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。btnPermissionsArr = Array.of(binding.value);}else{// 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。btnPermissionsArr = vnode.context.$route.meta.btnPermissions;}if (!Vue.prototype.$_has(btnPermissionsArr)) {el.parentNode.removeChild(el);}}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {let isExist = false;// 获取用户按钮权限let btnPermissionsStr = sessionStorage.getItem("btnPermissions");if (btnPermissionsStr == undefined || btnPermissionsStr == null) {return false;}if (value.indexOf(btnPermissionsStr) > -1) {isExist = true;}return isExist;
};
export {has}

Vue实现权限管理的方法相关推荐

php 位运算与权限,PHP巧妙利用位运算实现网站权限管理的方法
首先我们先定义4个常量来设定四种权限: ===================================== define(ADD,1);//增加数据库记录的权限 define(UPD,2);/ ...
django认证系统实现自定义权限管理的方法 - python
文章来源:嗨学网敏而好学论坛www.piaodoo.com 欢迎大家相互学习本文记录使用django自带的认证系统实现自定义的权限管理系统,包含组权限.用户权限等实现. 0x01. django认 ...
mysql创建函数的权限_MySQL创建用户和权限管理的方法
一.如何创建用户和密码 1.进入到mysql数据库下 mysql> use mysql Database changed 2.对新用户增删改 1.创建用户 # 指定ip:192.118.1.1的 ...
Vue 角色权限管理设计与实现
目前项目中使用到的角色权限管理共分为三级,分别是页面级.行为级(控件级).接口级,这里记录一下三级权限在 Vue 中的实现. 一.接口设计用户登录后该用户的角色与权限信息会一同返回给前端,前端将这些 ...
Vue-role vue 可视化权限管理
项目介绍 Vue-role v0.1.0 正式发布,Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单,和传统的树形权限结构说 no V0.1.0功能 ...
利用vuex和localStorage实现vue菜单权限管理（笔记）
最近需要实现菜单权限管理的功能,好久没写了,之前也没有记录过,就很烦.在这里记录一下.实现方法太多了.后续再整理一下. store/index.js vuex里获取权限列表 //存token cons ...
vue + router 权限管理不同角色显示不同路由
思路: login页面登录时加上角色的标记,存储到本地缓存(localstorage) 路由js文件,meta属性加个是否可见(visiable true或false) home 基本导航栏页面逻辑 ...
android 程序root权限管理,手机root之后进行软件程序授权管理手机root权限管理方法...
很多智能手机都会进行刷机,获取ROOT权限,但是如果没有进行正确的软件程序授权设置的话,使用起来跟没有ROOT之前是一样的,没办法获得软件程序的最高权限,软件也是没办法使用的.因此,今天,我们就一起来 ...
Spring Security认证授权练手小项目腾讯视频VIP权限管理功能
腾讯视频VIP权限管理 1.项目功能视频演示 2.需求与设计 1.需求 2.功能概要 3.接口设计 3.项目源码结构 4.项目源码下载 5.项目部署 1.部署架构 2.数据库环境准备 3.redis环 ...