vue中如何实现后台管理系统的权限控制的方法步骤


Posted in Javascript onSeptember 05, 2019

一、前言

在广告机项目中,角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细:

  • 接口访问的权限控制
  • 页面的权限控制
    • 菜单中的页面是否能被访问
    • 页面中的按钮(增、删、改)的权限控制是否显示

下面我们就看一看是如何实现这些个权限控制的。

二、接口访问的权限控制

接口权限就是对用户的校验。正常来说,在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用接口时都需要带上这个Token,

然后服务端获取到这个Token后进行比对,如果通过则可以访问。

现有的做法是在登录成功的回调中将后台返回的Token直接存储到 sessionStorag​e ,然在请求时将Token取出放入headers中传给后台,代码如下:

this.$http({
   method: 'get',
   url: 'test/query?id=20',
   withCredentials: true,
   headers: {
   token: sessionStorage.getItem('token'),
   name: sessionStorage.getItem('name') //应后台需求传的用户名
   }
  }).then(response => {
   //请求成功后的操作
  })

后来在一些文章中发现axios可以在拦截器中直接将Token塞入 config.headers.Authorization 中,作为全局传入。下面是代码部分:

//main.js
import axios from 'axios'

// 实例化Axios,并进行超时设置
const service = axios.create({
 timeout: 5000
})
// baseURL
// axios.defaults.baseURL = 'https://api.github.com';

// http request 拦截器
// 每次请求都为http头增加Authorization字段,其内容为token
service.interceptors.request.use(
 config => {
  if (store.state.user.token) {
   config.headers.Authorization = `token ${store.state.user.token}`;
  }
  return config
 },
 err => {
  return Promise.reject(err)
 }
);
export default service

三、页面权限控制

在前面已经说到,页面权限控制又分为两种:

  • 菜单中的页面是否能被访问
  • 页面中的按钮(增、删、改)的权限控制是否显示

这些权限一般是在固定页面进行配置,保存后记录到数据库中。

按钮权限暂且不提,页面访问权限在实现中又可以分为两种方式:

  • 显示所有菜单,当用户访问不在自己权限内的菜单时,提示权限不足
  • 只显示当前用户能访问的权限内菜单,如果用户通过URL进行强制访问,则会直接进入404

既然展现出来后不能点,那算几个意思,逗我玩儿呢?所谓眼不见为净,综合考虑后,肯定是方案二比较符合良好的用户体验。

好,我们现在梳理一下大致的页面访问权限的流程:

vue中如何实现后台管理系统的权限控制的方法步骤

在对流程梳理完成后我们开始进行详细的编写。

1、创建路由表

创建路由表实际上没有什么难度,照着vue-router官方文档给的示例直接写就行了。但是因为有部分页面是不需要访问权限的,

所以需要将登录、404、维护等页面写到默认的路由中,而将其它的需要权限的页面写到一个变量或者一个文件中,这样可

以有效的减轻后续的维护压力。

下面将index.js的代码贴上,异步路由将适量减少,以免占过多篇幅。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import App from '@/App'
import store from '../store/index'

Vue.use(Router);

//手动跳转的页面白名单
const whiteList = [
 '/'
];
//默认不需要权限的页面
const constantRouterMap = [
 {
 path: '/',
 name: '登录',
 component: (resolve) => require(['@/components/login'], resolve)
 },
 {
 path: '/index',
 name: 'nav.Home',
 component: (resolve) => require(['@/components/index'], resolve)
 },
 {
 path: '/templateMake',
 name: '模板制作',
 component: (resolve) => require(['@/components/Template/templateMake'], resolve)
 },
 {
 path: '/programMack',
 name: '节目制作',
 component: (resolve) => require(['@/components/Template/programMack'], resolve)
 },
 {
 path: '/release',
 name: '节目发布',
 component: (resolve) => require(['@/components/Program/release'], resolve)
 }
]

//注册路由
export const router = new Router({
 routes: constantRouterMap
});

//异步路由(需要权限的页面)
export const asyncRouterMap = [

 {
 path: '/resource',
 name: 'nav.Resource',
 meta: {
  permission: []
 },
 component: (resolve) => require(['@/components/Resource/resource'], resolve)
 },
 {
 path: '/template',
 name: 'nav.Template',
 meta: {
  permission: []
 },
 component: (resolve) => require(['@/components/Template/template'], resolve)
 },
 {
 path: '/generalSet',
 name: 'nav.System',
 meta: {
  permission: []
 },
 component: (resolve) => require(['@/components/SystemSet/generalSet'], resolve)
 },
 {
 path: '',
 name: 'nav.Log',
 component: App,
 children: [
  {
  path: '/userLog',
  name: 'nav.UserLog',
  meta: {
   permission: []
  },
  component: (resolve) => require(['@/components/Log/userLog'], resolve),
  },
  {
  path: '/operatingLog',
  name: 'nav.SystemLog',
  meta: {
   permission: []
  },
  component: (resolve) => require(['@/components/Log/operatingLog'], resolve),
  },
 ]
 }
 ]
];

注意事项:这里有一个需要非常注意的地方就是 404 页面一定要最后加载,如果放在constantRouterMap一同声明了404,后面的所以页面都会被拦截到404,详细的问题见 addRoutes when you've got a wildcard route for 404s does not work

2、页面访问权限

在开始时我们梳理了一个大致的页面访问权限流程。下面我们先实现最核心的部分:

vue中如何实现后台管理系统的权限控制的方法步骤

我们首先获取用户权限列表,在这里我们将接触到vuex状态管理,官方文档有详细介绍,这里就不过多描述了,下面请看代码:

// store/index.js
import Axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
const axios = Axios.create();

const state = {
 mode: 'login',
 list: []
};

const getters = {};

const mutations = {
 setMode: (state, data) => {
 state.mode = data
 },
 setList: (state, data) => {
 state.list = data
 }
};

const actions = {
 // 获取权限列表
 getPermission({commit}) {
 return new Promise((resolve, reject) => {
  axios({
  url: '/privilege/queryPrivilege?id=' + sessionStorage.getItem('privId'),
  methods: 'get',
  headers: {
   token: sessionStorage.getItem('token'),
   name: sessionStorage.getItem('name')
  }
  }).then((res) => {
  // 存储权限列表
  commit('setList', res.data.cust.privileges[0].children);
  resolve(res.data.cust.privileges[0].children)
  }).catch(() => {
  reject()
  })
 })
 }
};

export default new Vuex.Store({
 state,
 mutations,
 actions,
 getters
})

好了,我们现在请求后台拿到了权限数据,并将数据存放到了vuex中,下面我们需要利用返回数据匹配之前写的异步路由表,将匹配结果和静态路由表结合,开成最终的实际路由表。

其中最关键的是利用vue-router2.2.0版本新添加的一个addRoutes方法,我们看看官方文档如何解释此方法的:

router.addRoutes(routes) 2.2.0+  动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

那我们现在就可以开始使用addRoutes进行路由匹配了。下面看代码:

// router/index.js
/**
 * 根据权限匹配路由
 * @param {array} permission 权限列表(菜单列表)
 * @param {array} asyncRouter 异步路由对象
 */
function routerMatch(permission, asyncRouter) {
 return new Promise((resolve) => {
 const routers = [];
 // 创建路由
 function createRouter(permission) {
   // 根据路径匹配到的router对象添加到routers中即可
  permission.forEach((item) => {
  if (item.children && item.children.length) {
   createRouter(item.children)
  }
  let path = item.path;
  // 循环异步路由,将符合权限列表的路由加入到routers中
  asyncRouter.find((s) => {
   if (s.path === '') {
   s.children.find((y) => {
    if (y.path === path) {
    y.meta.permission = item.permission;
    routers.push(s);
    }
   })
   }
   if (s.path === path) {
   s.meta.permission = item.permission;
   routers.push(s);
   }
  })
  })
 }

 createRouter(permission)
 resolve([routers])
 })
}

然后我们编写导航钩子

// router/index.js
router.beforeEach((to, form, next) => {
 if (sessionStorage.getItem('token')) {
 if (to.path === '/') {
  router.replace('/index')
 } else {
  console.log(store.state.list.length);
  if (store.state.list.length === 0) {
   //如果没有权限列表,将重新向后台请求一次
  store.dispatch('getPermission').then(res => {
   //调用权限匹配的方法
   routerMatch(res, asyncRouterMap).then(res => {
    //将匹配出来的权限列表进行addRoutes
   router.addRoutes(res[0]);
   next(to.path)
   })
  }).catch(() => {
   router.replace('/')
  })
  } else {
  if (to.matched.length) {
   next()
  } else {
   router.replace('/')
  }
  }
 }
 } else {
 if (whiteList.indexOf(to.path) >= 0) {
  next()
 } else {
  router.replace('/')
 }
 }
});

到这里我们已经完成了对页面访问的权限控制,接下来我们来讲解一下操作按扭的权限部分。

四、数据操作权限

是否还记得前面的路由配置中我们多出来的一个代码,下面我们拿出来看看:

//异步路由(需要权限的页面)
export const asyncRouterMap = [

 {
 path: '/resource',
 name: 'nav.Resource',
 meta: {
  permission: []
 },
 component: (resolve) => require(['@/components/Resource/resource'], resolve)
 },
 {
 path: '/template',
 name: 'nav.Template',
 meta: {
  permission: []
 },
 component: (resolve) => require(['@/components/Template/template'], resolve)
 },
 {
 path: '/generalSet',
 name: 'nav.System',
 meta: {
  permission: []
 },
 component: (resolve) => require(['@/components/SystemSet/generalSet'], resolve)
 },
 {
 path: '',
 name: 'nav.Log',
 component: App,
 children: [
  {
  path: '/userLog',
  name: 'nav.UserLog',
  meta: {
   permission: []
  },
  component: (resolve) => require(['@/components/Log/userLog'], resolve),
  },
  {
  path: '/operatingLog',
  name: 'nav.SystemLog',
  meta: {
   permission: []
  },
  component: (resolve) => require(['@/components/Log/operatingLog'], resolve),
  },
 ]
 }
 ]
];

为每个路由页面增加meta字段。在routerMatch函数中将匹配到的详细权限字段赋值到这里。这样在每个页面的route对象中就会得到这个字段。

asyncRouter.find((s) => {
   if (s.path === '') {
   s.children.find((y) => {
    if (y.path === path) {
     //赋值
    y.meta.permission = item.permission;
    routers.push(s);
    }
   })
   }
   if (s.path === path) {
   s.meta.permission = item.permission;
   routers.push(s);
   }
  })

接下来我们编写一个vue自定义指令对页面中需要进行鉴权的元素进行判断,比如类似这样的:

<a @click="upload" v-allow="'3'"></a> /* 3代表一个上传权限的ID,权限中有3则显示按钮 */

我们直接注册一个全局指令,利用vnode来访问vue的方法。代码如下:

//main.js
//按扭权限指令
Vue.directive('allow', {
 inserted: (el, binding, vnode) => {
 let permissionList = vnode.context.$route.meta.permission;
 if (!permissionList.includes(binding.value)) {
  el.parentNode.removeChild(el)
 }
 }
})

至此为止,权限控制流程就已经完全结束了,在最后我们再看一下完整的权限控制流程图吧.

五、路由控制完整流程图

vue中如何实现后台管理系统的权限控制的方法步骤

六、参考文献

Vue + ElementUI 手撸后台管理网站之权限控制

手摸手,带你用vue撸后台之权限控制

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 #Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 #Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 #Javascript
layui table数据修改的回显方法
Sep 04 #Javascript
Vue实现商品详情页的评价列表功能
Sep 04 #Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 #Javascript
解决layui表格的表头不滚动的问题
Sep 04 #Javascript
You might like
PHP获取当前页面URL函数实例
2014/10/22 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
纯JS实现简单的日历
2017/06/26 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
js实现div色块碰撞
2020/01/16 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
Python多线程编程(一):threading模块综述
2015/04/05 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
使用python远程操作linux过程解析
2019/12/04 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python必须了解的35个关键词
2020/07/16 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers