代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>权限设计-RBAC的权限设计思想 | 人资项目</title>
<meta name="generator" content="VuePress 1.8.2">
<meta name="description" content="人力资源管理系统项目">
<link rel="preload" href="/hrsass-notes/assets/css/0.styles.a2812fe6.css" as="style"><link rel="preload" href="/hrsass-notes/assets/js/app.6c8c6ef7.js" as="script"><link rel="preload" href="/hrsass-notes/assets/js/2.dbebf407.js" as="script"><link rel="preload" href="/hrsass-notes/assets/js/7.aad1ab06.js" as="script"><link rel="prefetch" href="/hrsass-notes/assets/js/10.a57b780c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/11.dc45fce4.js"><link rel="prefetch" href="/hrsass-notes/assets/js/12.45e48562.js"><link rel="prefetch" href="/hrsass-notes/assets/js/13.95efdd8f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/14.7dd970c2.js"><link rel="prefetch" href="/hrsass-notes/assets/js/15.cb4a760f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/16.104f1088.js"><link rel="prefetch" href="/hrsass-notes/assets/js/17.4082264f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/18.ea0e5a1a.js"><link rel="prefetch" href="/hrsass-notes/assets/js/19.44df7a6c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/20.2da2450e.js"><link rel="prefetch" href="/hrsass-notes/assets/js/21.2b218055.js"><link rel="prefetch" href="/hrsass-notes/assets/js/22.ebaa787f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/3.dd9ee1b1.js"><link rel="prefetch" href="/hrsass-notes/assets/js/4.04f228d0.js"><link rel="prefetch" href="/hrsass-notes/assets/js/5.dc6fc8bc.js"><link rel="prefetch" href="/hrsass-notes/assets/js/6.08bd0e1c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/8.562a2120.js"><link rel="prefetch" href="/hrsass-notes/assets/js/9.c7557c6f.js">
<link rel="stylesheet" href="/hrsass-notes/assets/css/0.styles.a2812fe6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/hrsass-notes/" class="home-link router-link-active"><img src="/hrsass-notes/logo.png" alt="人资项目" class="logo"> <span class="site-name can-hide">人资项目</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
预览地址
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="课程内容" class="dropdown-title"><span class="title">课程内容</span> <span class="arrow down"></span></button> <button type="button" aria-label="课程内容" class="mobile-dropdown-title"><span class="title">课程内容</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/hrsass-notes/01-vuex基础.html" class="nav-link">
01-vuex基础
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/02-基础环境搭建.html" class="nav-link">
02-基础环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/03-登录模块.html" class="nav-link">
03-登录模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/04-主页模块.html" class="nav-link">
04-主页模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/05-路由和页面.html" class="nav-link">
05-路由和页面
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/06-组织架构.html" class="nav-link">
06-组织架构
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/07-公司和角色.html" class="nav-link">
07-公司和角色
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/08-员工管理.html" class="nav-link">
08-员工管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/09-权限设计和管理.html" class="nav-link">
09-权限设计和管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/10-其他模块集成.html" class="nav-link">
10-其他模块集成
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/11-主页审批-图表.html" class="nav-link">
11-主页审批-图表
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/12-多语言tab页全屏主题.html" class="nav-link">
12-多语言tab页全屏主题
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/13-打包上线.html" class="nav-link">
13-打包上线
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/Element表单校验补充.html" class="nav-link">
Element表单校验补充
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="核心生态" class="dropdown-title"><span class="title">核心生态</span> <span class="arrow down"></span></button> <button type="button" aria-label="核心生态" class="mobile-dropdown-title"><span class="title">核心生态</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
VueRouter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vuex
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Axios
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
ElementUI
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="相关插件" class="dropdown-title"><span class="title">相关插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="相关插件" class="mobile-dropdown-title"><span class="title">相关插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-i18n
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/vue-print-nb" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-print-nb
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/screenfull" target="_blank" rel="noopener noreferrer" class="nav-link external">
screenfull
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/nprogress" target="_blank" rel="noopener noreferrer" class="nav-link external">
nprogress
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/echarts" target="_blank" rel="noopener noreferrer" class="nav-link external">
echarts
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/xlsx" target="_blank" rel="noopener noreferrer" class="nav-link external">
xlsx
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/cos-js-sdk-v5" target="_blank" rel="noopener noreferrer" class="nav-link external">
cos-js-sdk-v5
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
预览地址
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="课程内容" class="dropdown-title"><span class="title">课程内容</span> <span class="arrow down"></span></button> <button type="button" aria-label="课程内容" class="mobile-dropdown-title"><span class="title">课程内容</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/hrsass-notes/01-vuex基础.html" class="nav-link">
01-vuex基础
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/02-基础环境搭建.html" class="nav-link">
02-基础环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/03-登录模块.html" class="nav-link">
03-登录模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/04-主页模块.html" class="nav-link">
04-主页模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/05-路由和页面.html" class="nav-link">
05-路由和页面
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/06-组织架构.html" class="nav-link">
06-组织架构
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/07-公司和角色.html" class="nav-link">
07-公司和角色
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/08-员工管理.html" class="nav-link">
08-员工管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/09-权限设计和管理.html" class="nav-link">
09-权限设计和管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/10-其他模块集成.html" class="nav-link">
10-其他模块集成
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/11-主页审批-图表.html" class="nav-link">
11-主页审批-图表
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/12-多语言tab页全屏主题.html" class="nav-link">
12-多语言tab页全屏主题
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/13-打包上线.html" class="nav-link">
13-打包上线
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/Element表单校验补充.html" class="nav-link">
Element表单校验补充
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="核心生态" class="dropdown-title"><span class="title">核心生态</span> <span class="arrow down"></span></button> <button type="button" aria-label="核心生态" class="mobile-dropdown-title"><span class="title">核心生态</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
VueRouter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vuex
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Axios
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
ElementUI
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="相关插件" class="dropdown-title"><span class="title">相关插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="相关插件" class="mobile-dropdown-title"><span class="title">相关插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-i18n
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/vue-print-nb" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-print-nb
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/screenfull" target="_blank" rel="noopener noreferrer" class="nav-link external">
screenfull
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/nprogress" target="_blank" rel="noopener noreferrer" class="nav-link external">
nprogress
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/echarts" target="_blank" rel="noopener noreferrer" class="nav-link external">
echarts
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/xlsx" target="_blank" rel="noopener noreferrer" class="nav-link external">
xlsx
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/cos-js-sdk-v5" target="_blank" rel="noopener noreferrer" class="nav-link external">
cos-js-sdk-v5
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>权限设计-RBAC的权限设计思想</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#权限设计-rbac的权限设计思想" class="sidebar-link">权限设计-RBAC的权限设计思想</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#给分配员工角色" class="sidebar-link">给分配员工角色</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#新建分配角色窗体" class="sidebar-link">新建分配角色窗体</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#获取角色列表和当前用户角色" class="sidebar-link">获取角色列表和当前用户角色</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#给员工分配角色" class="sidebar-link">给员工分配角色</a></li></ul></li><li><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#权限点管理页面开发" class="sidebar-link">权限点管理页面开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#新建权限点管理页面" class="sidebar-link">新建权限点管理页面</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#获取权限数据并转化树形" class="sidebar-link">获取权限数据并转化树形</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#新增编辑权限的弹层" class="sidebar-link">新增编辑权限的弹层</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#新增-编辑-删除权限点" class="sidebar-link">新增，编辑，删除权限点</a></li></ul></li><li><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#给角色分配权限" class="sidebar-link">给角色分配权限</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#新建分配权限弹出层" class="sidebar-link">新建分配权限弹出层</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#给角色分配权限-2" class="sidebar-link">给角色分配权限</a></li></ul></li><li><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#前端权限应用-页面访问和菜单" class="sidebar-link">前端权限应用-页面访问和菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#权限受控的主体思路" class="sidebar-link">权限受控的主体思路</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#新建vuex中管理权限的模块" class="sidebar-link">新建Vuex中管理权限的模块</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#vuex筛选权限路由" class="sidebar-link">Vuex筛选权限路由</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#权限拦截出调用筛选权限action" class="sidebar-link">权限拦截出调用筛选权限Action</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#静态路由动态路由解除合并" class="sidebar-link">静态路由动态路由解除合并</a></li></ul></li><li><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#登出时-重置路由权限和-404问题" class="sidebar-link">登出时，重置路由权限和 404问题</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#功能权限应用" class="sidebar-link">功能权限应用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#功能权限的受控思路" class="sidebar-link">功能权限的受控思路</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/09-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E5%92%8C%E7%AE%A1%E7%90%86.html#使用mixin技术将检查方法注入" class="sidebar-link">使用Mixin技术将检查方法注入</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="权限设计-rbac的权限设计思想"><a href="#权限设计-rbac的权限设计思想" class="header-anchor">#</a> 权限设计-RBAC的权限设计思想</h2> <blockquote><p>首先，我们先了解下什么是传统的权限设计</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200901150655343.5bee7661.png" alt="image-20200901150655343"></p> <p>从上面的图中，我们发现，传统的权限设计是对每个人进行单独的权限设置，但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限</p> <blockquote><p>基于此，RBAC的权限模型就应运而生了，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式如下</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200901151025021.c868ed8d.png" alt="image-20200901151025021"></p> <p>RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可，接下来，我们就在该项目中实施这一设想</p> <h2 id="给分配员工角色"><a href="#给分配员工角色" class="header-anchor">#</a> 给分配员工角色</h2> <p>**<code>目标</code>**在员工管理页面，分配角色</p> <h3 id="新建分配角色窗体"><a href="#新建分配角色窗体" class="header-anchor">#</a> 新建分配角色窗体</h3> <blockquote><p>在上一节章节中，员工管理的角色功能，我们并没有实现，此章节我们实现给员工分配角色</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200901151151286.68fb30fc.png" alt="image-20200901151151286"></p> <p>从上图中，可以看出，用户和角色是**<code>1对多</code>**的关系，即一个用户可以拥有多个角色，比如公司的董事长可以拥有总经理和系统管理员一样的角色</p> <p>首先，新建分配角色窗体 <strong><code>employees/components/assign-role.vue</code></strong></p> <p><img src="/hrsass-notes/assets/img/image-20200728172853451.001f4f16.png" alt="image-20200728172853451"></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dialog</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>分配角色<span class="token punctuation">"</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showRoleDialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- el-checkbox-group选中的是 当前用户所拥有的角色 需要绑定 当前用户拥有的角色--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-checkbox-group</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 选项 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-checkbox-group</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>确定<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dialog</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
showRoleDialog<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 用户的id 用来查询当前用户的角色信息</span>
userId<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h3 id="获取角色列表和当前用户角色"><a href="#获取角色列表和当前用户角色" class="header-anchor">#</a> 获取角色列表和当前用户角色</h3> <p><strong>获取所有角色列表<code>assign-role.vue</code></strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token comment"><!-- 分配角色 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>roleIds<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-checkbox</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in list<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
{{
item.name
}}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-checkbox</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-checkbox-group</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>获取角色列表<code>assign-role.vue</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getRoleList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/setting'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
showRoleDialog<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
userId<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 角色列表</span>
roleIds<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRoleList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 获取所有角色</span>
<span class="token keyword">async</span> <span class="token function">getRoleList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> rows <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getRoleList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> rows
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><p><strong>获取用户的当前角色<code>assign-role.vue</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getUserDetailById <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/user'</span>
<span class="token keyword">async</span> <span class="token function">getUserDetailById</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> roleIds <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getUserDetailById</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>roleIds <span class="token operator">=</span> roleIds <span class="token comment">// 赋值本用户的角色</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>点击角色弹出层<code>employees/index.vue</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> assignRole <span class="token keyword">from</span> <span class="token string">'./components/assign-role.vue'</span> <span class="token comment">// 导入组件</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token operator">...</span><span class="token punctuation">,</span>
assignRole <span class="token comment">// 注册组件</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
userId<span class="token operator">:</span><span class="token keyword">null</span> <span class="token comment">// 用户id</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment"><!-- 放置角色分配组件 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>assign-role</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>assignRole<span class="token punctuation">"</span></span> <span class="token attr-name">:show-role-dialog.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showRoleDialog<span class="token punctuation">"</span></span> <span class="token attr-name">:user-id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>userId<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 编辑角色</span>
<span class="token keyword">async</span> <span class="token function">editRole</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>userId <span class="token operator">=</span> id <span class="token comment">// props传值 是异步的</span>
<span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>assignRole<span class="token punctuation">.</span><span class="token function">getUserDetailById</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token comment">// 父组件调用子组件方法</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showRoleDialog <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment"><!-- 按钮调用 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>editRole(row.id)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>角色<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="给员工分配角色"><a href="#给员工分配角色" class="header-anchor">#</a> 给员工分配角色</h3> <p><strong>分配角色接口</strong> <strong><code>api/employees.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/** *
* 给用户分配角色
* ***/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">assignRoles</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token string">'/sys/user/assignRoles'</span><span class="token punctuation">,</span>
data<span class="token punctuation">,</span>
method<span class="token operator">:</span> <span class="token string">'put'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><strong>确定保存</strong> <strong><code>assign-role.vue</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> assignRoles <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/employees'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">async</span> <span class="token function">btnOK</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">await</span> <span class="token function">assignRoles</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userId<span class="token punctuation">,</span> roleIds<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>roleIds <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'设置成功'</span><span class="token punctuation">)</span>
<span class="token comment">// 关闭窗体</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update:showRoleDialog'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>**取消或者关闭 ** <strong><code>assign-role.vue</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">btnCancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>roleIds <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 清空原来的数组</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update:showRoleDialog'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> 分配员工权限</p> <h2 id="权限点管理页面开发"><a href="#权限点管理页面开发" class="header-anchor">#</a> 权限点管理页面开发</h2> <p><strong><code>目标</code></strong>： 完成权限点页面的开发和管理</p> <h3 id="新建权限点管理页面"><a href="#新建权限点管理页面" class="header-anchor">#</a> 新建权限点管理页面</h3> <blockquote><p>人已经有了角色， 那么权限是什么</p></blockquote> <p>在企业服务中，权限一般分割为 <strong>页面访问权限</strong>，<strong>按钮操作权限</strong>，<strong>API访问权限</strong></p> <blockquote><p>API权限多见于在后端进行拦截，所以我们这一版本只做**<code>页面访问</code><strong>和</strong><code>按钮操作授权</code>/**</p></blockquote> <p>由此，我们可以根据业务需求设计权限管理页面</p> <p><img src="/hrsass-notes/assets/img/image-20200901160508382.b6a5c1ca.png" alt="image-20200901160508382"></p> <p><strong>完成权限页面结构</strong> <strong><code>src/views/permission/index.vue</code></strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dashboard-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 靠右的按钮 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>page-tools</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>after</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>添加权限<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>page-tools</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 表格 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table</span> <span class="token attr-name">border</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>标识<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>描述<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>操作<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>添加<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table-column</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p><strong>封装权限管理的增删改查请求</strong> <strong><code>src/api/permisson.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>
<span class="token comment">// 获取权限</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getPermissionList</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token string">'/sys/permission'</span><span class="token punctuation">,</span>
params
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 新增权限</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">addPermission</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token string">'/sys/permission'</span><span class="token punctuation">,</span>
method<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
data
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 更新权限</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">updatePermission</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/sys/permission/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
method<span class="token operator">:</span> <span class="token string">'put'</span><span class="token punctuation">,</span>
data
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 删除权限</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">delPermission</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/sys/permission/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
method<span class="token operator">:</span> <span class="token string">'delete'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 获取权限详情</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getPermissionDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/sys/permission/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br></div></div><h3 id="获取权限数据并转化树形"><a href="#获取权限数据并转化树形" class="header-anchor">#</a> 获取权限数据并转化树形</h3> <p>这里，我们通过树形操作方法，将列表转化成层级数据</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> getPermissionList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/permission'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> tranListToTreeData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
formData<span class="token operator">:</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 名称</span>
code<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 标识</span>
description<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 描述</span>
type<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了</span>
pid<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 因为做的是树 需要知道添加到哪个节点下了</span>
enVisible<span class="token operator">:</span> <span class="token string">'0'</span> <span class="token comment">// 开启</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
rules<span class="token operator">:</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'权限名称不能为空'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
code<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'权限标识不能为空'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
showDialog<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPermissionList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">showText</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>id <span class="token operator">?</span> <span class="token string">'编辑'</span> <span class="token operator">:</span> <span class="token string">'新增'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token keyword">async</span> <span class="token function">getPermissionList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> <span class="token function">tranListToTreeData</span><span class="token punctuation">(</span><span class="token keyword">await</span> <span class="token function">getPermissionList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><p><strong>绑定表格数据</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">row-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>名称<span class="token punctuation">"</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>标识<span class="token punctuation">"</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>code<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>描述<span class="token punctuation">"</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>操作<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ row }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row.type === 1<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>addPermission(row.id, 2)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>添加<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>editPermission(row.id)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delPermission(row.id)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 删除<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table-column</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>需要注意的是， 如果需要树表， 需要给<strong>el-table</strong>配置<strong>row-key</strong>属性 id</p> <blockquote><p>当type为1时为访问权限，type为2时为功能权限</p></blockquote> <blockquote><p>和前面内容一样，我们需要完成 新增权限 / 删除权限 / 编辑权限</p></blockquote> <h3 id="新增编辑权限的弹层"><a href="#新增编辑权限的弹层" class="header-anchor">#</a> 新增编辑权限的弹层</h3> <p><strong>新增权限/编辑权限弹层</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token comment"><!-- 放置一个弹层 用来编辑新增节点 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dialog</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`${showText}权限点`<span class="token punctuation">"</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showDialog<span class="token punctuation">"</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btnCancel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 表单 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>perForm<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData<span class="token punctuation">"</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rules<span class="token punctuation">"</span></span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>120px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>权限名称<span class="token punctuation">"</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData.name<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>90%</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>权限标识<span class="token punctuation">"</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData.code<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>90%</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>权限描述<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData.description<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>90%</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>开启<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-switch</span>
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData.enVisible<span class="token punctuation">"</span></span>
<span class="token attr-name">active-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span>
<span class="token attr-name">inactive-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btnOK<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>确定<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btnCancel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dialog</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="新增-编辑-删除权限点"><a href="#新增-编辑-删除权限点" class="header-anchor">#</a> 新增，编辑，删除权限点</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>after</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>addPermission(0,1)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>添加权限<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>新增/删除/编辑逻辑</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> updatePermission<span class="token punctuation">,</span> addPermission<span class="token punctuation">,</span> getPermissionDetail<span class="token punctuation">,</span> delPermission<span class="token punctuation">,</span> getPermissionList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/permission'</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 删除操作</span>
<span class="token keyword">async</span> <span class="token function">delPermission</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$confirm</span><span class="token punctuation">(</span><span class="token string">'确定要删除该数据吗'</span><span class="token punctuation">)</span>
<span class="token keyword">await</span> <span class="token function">delPermission</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPermissionList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'删除成功'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">btnOK</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>perForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">updatePermission</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token function">addPermission</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// 提示消息</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'新增成功'</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPermissionList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showDialog <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">btnCancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>formData <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 名称</span>
code<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 标识</span>
description<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 描述</span>
type<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了</span>
pid<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 因为做的是树 需要知道添加到哪个节点下了</span>
enVisible<span class="token operator">:</span> <span class="token string">'0'</span> <span class="token comment">// 开启</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>perForm<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showDialog <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">addPermission</span><span class="token punctuation">(</span><span class="token parameter">pid<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>pid <span class="token operator">=</span> pid
<span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>type <span class="token operator">=</span> type
<span class="token keyword">this</span><span class="token punctuation">.</span>showDialog <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token keyword">async</span> <span class="token function">editPermission</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 根据获取id获取详情</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>formData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getPermissionDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showDialog <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br></div></div><p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong>: 权限点管理页面开发</p> <h2 id="给角色分配权限"><a href="#给角色分配权限" class="header-anchor">#</a> 给角色分配权限</h2> <p><strong><code>目标</code></strong>： 完成给角色分配权限的业务</p> <h3 id="新建分配权限弹出层"><a href="#新建分配权限弹出层" class="header-anchor">#</a> 新建分配权限弹出层</h3> <blockquote><p>在公司设置的章节中，我们没有实现分配权限的功能，在这里我们来实现一下</p></blockquote> <p><strong>封装分配权限的api</strong> <strong><code>src/api/setting.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 给角色分配权限</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">assignPerm</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token string">'/sys/role/assignPrem'</span><span class="token punctuation">,</span>
method<span class="token operator">:</span> <span class="token string">'put'</span><span class="token punctuation">,</span>
data
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>给角色分配权限弹出层</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dialog</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>分配权限<span class="token punctuation">"</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showPermDialog<span class="token punctuation">"</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btnPermCancel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 权限是一颗树 --></span>
<span class="token comment"><!-- 将数据绑定到组件上 --></span>
<span class="token comment"><!-- check-strictly 如果为true 那表示父子勾选时 不互相关联 如果为false就互相关联 --></span>
<span class="token comment"><!-- id作为唯一标识 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tree</span>
<span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>permTree<span class="token punctuation">"</span></span>
<span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>permData<span class="token punctuation">"</span></span>
<span class="token attr-name">:props</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultProps<span class="token punctuation">"</span></span>
<span class="token attr-name">:show-checkbox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span>
<span class="token attr-name">:check-strictly</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span>
<span class="token attr-name">:default-expand-all</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span>
<span class="token attr-name">:default-checked-keys</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selectCheck<span class="token punctuation">"</span></span>
<span class="token attr-name">node-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token comment"><!-- 确定 取消 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btnPermOK<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>确定<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btnPermCancel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dialog</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p><strong>定义数据</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> showPermDialog<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 控制分配权限弹层的显示后者隐藏</span>
defaultProps<span class="token operator">:</span> <span class="token punctuation">{</span>
label<span class="token operator">:</span> <span class="token string">'name'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
permData<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 专门用来接收权限数据 树形数据</span>
selectCheck<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 定义一个数组来接收 已经选中的节点</span>
roleId<span class="token operator">:</span> <span class="token keyword">null</span> <span class="token comment">// 用来记录分配角色的id</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>点击分配权限</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>assignPerm(row.id)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>分配权限<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="给角色分配权限-2"><a href="#给角色分配权限-2" class="header-anchor">#</a> 给角色分配权限</h3> <p><strong>分配权限</strong>/<strong>树形数据（<code>setting/index.vue</code>）</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> assignPerm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/setting'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> transListToTreeData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> tranListToTreeData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/permission'</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 点击分配权限</span>
<span class="token comment">// 获取权限点数据 在点击的时候调用 获取权限点数据</span>
<span class="token keyword">async</span> <span class="token function">assignPerm</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>permData <span class="token operator">=</span> <span class="token function">tranListToTreeData</span><span class="token punctuation">(</span><span class="token keyword">await</span> <span class="token function">getPermissionList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span> <span class="token comment">// 转化list到树形数据</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>roleId <span class="token operator">=</span> id
<span class="token comment">// 应该去获取 这个id的 权限点</span>
<span class="token comment">// 有id 就可以 id应该先记录下来</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> permIds <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getRoleDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token comment">// permIds是当前角色所拥有的权限点数据</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>selectCheck <span class="token operator">=</span> permIds <span class="token comment">// 将当前角色所拥有的权限id赋值</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showPermDialog <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token keyword">async</span> <span class="token function">btnPermOK</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 调用el-tree的方法</span>
<span class="token comment">// console.log(this.$refs.permTree.getCheckedKeys())</span>
<span class="token keyword">await</span> <span class="token function">assignPerm</span><span class="token punctuation">(</span><span class="token punctuation">{</span> permIds<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>permTree<span class="token punctuation">.</span><span class="token function">getCheckedKeys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>roleId <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'分配权限成功'</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showPermDialog <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">btnPermCancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>selectCheck <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 重置数据</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showPermDialog <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> 给角色分配权限</p> <h2 id="前端权限应用-页面访问和菜单"><a href="#前端权限应用-页面访问和菜单" class="header-anchor">#</a> 前端权限应用-页面访问和菜单</h2> <p><strong><code>目标</code></strong>： 在当前项目应用用户的页面访问权限</p> <h3 id="权限受控的主体思路"><a href="#权限受控的主体思路" class="header-anchor">#</a> 权限受控的主体思路</h3> <blockquote><p>到了最关键的环节，我们设置的权限如何应用？</p></blockquote> <p>在上面的几个小节中，我们已经把给用户分配了角色， 给角色分配了权限，那么在用户登录获取资料的时候，会自动查出该用户拥有哪些权限，这个权限需要和我们的菜单还有路由有效结合起来</p> <blockquote><p>我们在路由和页面章节中，已经介绍过，动态权限其实就是根据用户的实际权限来访问的，接下来我们操作一下</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200730002842243.43ab77e4.png" alt="image-20200730002842243"></p> <p>在权限管理页面中，我们设置了一个<strong>标识</strong>， 这个标识可以和我们的路由模块进行关联，也就是说，如果用户拥有这个标识，那么用户就可以<strong>拥有这个路由模块</strong>，如果没有这个标识，就不能<strong>访问路由模块</strong></p> <blockquote><p>用什么来实现？</p></blockquote> <p>vue-router提供了一个叫做<a href="https://router.vuejs.org/zh/api/#router-addroutes" target="_blank" rel="noopener noreferrer">addRoutes<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的API方法，这个方法的含义是<strong>动态添加路由规则</strong></p> <p>思路如下</p> <p><img src="/hrsass-notes/assets/img/image-20200901164312005.044453b5.png" alt="image-20200901164312005"></p> <h3 id="新建vuex中管理权限的模块"><a href="#新建vuex中管理权限的模块" class="header-anchor">#</a> 新建Vuex中管理权限的模块</h3> <blockquote><p>在<strong>主页模块</strong>章节中，我们将用户的资料设置到vuex中，其中便有权限数据，我们可以就此进行操作</p></blockquote> <p>我们可以在vuex中新增一个permission模块</p> <p><strong><code>src/store/modules/permission.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// vuex的权限模块</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> constantRoutes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/router'</span>
<span class="token comment">// vuex中的permission模块用来存放当前的 静态路由 + 当前用户的 权限路由</span>
<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
routes<span class="token operator">:</span> constantRoutes <span class="token comment">// 所有人默认拥有静态路由</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// newRoutes可以认为是 用户登录 通过权限所得到的动态路由的部分</span>
<span class="token function">setRoutes</span><span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> newRoutes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 下面这么写不对 不是语法不对 是业务不对</span>
<span class="token comment">// state.routes = [...state.routes, ...newRoutes]</span>
<span class="token comment">// 有一种情况 张三 登录 获取了动态路由 追加到路由上 李四登录 4个动态路由</span>
<span class="token comment">// 应该是每次更新 都应该在静态路由的基础上进行追加</span>
state<span class="token punctuation">.</span>routes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>constantRoutes<span class="token punctuation">,</span> <span class="token operator">...</span>newRoutes<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
state<span class="token punctuation">,</span>
mutations<span class="token punctuation">,</span>
actions
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>在Vuex管理模块中引入permisson模块</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> permission <span class="token keyword">from</span> <span class="token string">'./modules/permission'</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
modules<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 子模块 $store.state.app.</span>
<span class="token comment">// mapGetters([])</span>
app<span class="token punctuation">,</span>
settings<span class="token punctuation">,</span>
user<span class="token punctuation">,</span>
permission
<span class="token punctuation">}</span><span class="token punctuation">,</span>
getters
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="vuex筛选权限路由"><a href="#vuex筛选权限路由" class="header-anchor">#</a> Vuex筛选权限路由</h3> <blockquote><p>OK， 那么我们在哪将用户的标识和权限进行关联呢 ？</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200815184203715.8fea355a.png" alt="image-20200815184203715"></p> <p>我们可以在这张图中，进一步的进行操作</p> <p><img src="/hrsass-notes/assets/img/image-20200815184407204.674dbca0.png" alt="image-20200815184407204"></p> <p>访问权限的数据在用户属性**<code>menus</code><strong>中，</strong><code>menus</code>**中的标识该怎么和路由对应呢？</p> <p><img src="/hrsass-notes/assets/img/image-20200815185230597.1d8105cd.png" alt="image-20200815185230597"></p> <blockquote><p>可以将路由模块的根节点**<code>name</code>**属性命名和权限标识一致，这样只要标识能对上，就说明用户拥有了该权限</p></blockquote> <p>这一步，在我们命名路由的时候已经操作过了</p> <p><img src="/hrsass-notes/assets/img/image-20200730011629326.07faad33.png" alt="image-20200730011629326"></p> <p>接下来， vuex的permission中提供一个action，进行关联</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> asyncRoutes<span class="token punctuation">,</span> constantRoutes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/router'</span>
<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// 筛选权限路由</span>
<span class="token comment">// 第二个参数为当前用户的所拥有的菜单权限</span>
<span class="token comment">// menus: ["settings","permissions"]</span>
<span class="token comment">// asyncRoutes是所有的动态路由</span>
<span class="token comment">// asyncRoutes [{path: 'setting',name: 'setting'},{}]</span>
<span class="token function">filterRoutes</span><span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> menus</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token comment">// 筛选出 动态路由中和menus中能够对上的路由</span>
menus<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// key就是标识</span>
<span class="token comment">// asyncRoutes 找 有没有对象中的name属性等于 key的 如果找不到就没权限 如果找到了 要筛选出来</span>
routes<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>asyncRoutes<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>name <span class="token operator">===</span> key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 得到一个数组 有可能 有元素 也有可能是空数组</span>
<span class="token comment">//【 ☆☆☆ 一定要确保路由里面的name字段是否和数据库返回的标识是否统一，检查一致，否则出现丢失】</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 得到的routes是所有模块中满足权限要求的路由数组</span>
<span class="token comment">// routes就是当前用户所拥有的 动态路由的权限</span>
context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setRoutes'</span><span class="token punctuation">,</span> routes<span class="token punctuation">)</span> <span class="token comment">// 将动态路由提交给mutations</span>
<span class="token keyword">return</span> routes <span class="token comment">// 这里为什么还要return state数据 是用来 显示左侧菜单用的 return 是给路由addRoutes用的</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="权限拦截出调用筛选权限action"><a href="#权限拦截出调用筛选权限action" class="header-anchor">#</a> 权限拦截出调用筛选权限Action</h3> <p>在拦截的位置，调用关联action， 获取新增routes，并且<strong>addRoutes</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 权限拦截在路由跳转 导航守卫</span>
<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'@/router'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'@/store'</span> <span class="token comment">// 引入store实例 和组件中的this.$store是一回事</span>
<span class="token keyword">import</span> nprogress <span class="token keyword">from</span> <span class="token string">'nprogress'</span> <span class="token comment">// 引入进度条</span>
<span class="token keyword">import</span> <span class="token string">'nprogress/nprogress.css'</span> <span class="token comment">// 引入进度条样式</span>
<span class="token comment">// 不需要导出 因为只需要让代码执行即可</span>
<span class="token comment">// 前置守卫</span>
<span class="token comment">// next是前置守卫必须必须必须执行的钩子 next必须执行 如果不执行 页面就死了</span>
<span class="token comment">// next() 放过</span>
<span class="token comment">// next(false) 跳转终止</span>
<span class="token comment">// next(地址) 跳转到某个地址</span>
<span class="token keyword">const</span> whiteList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token string">'/404'</span><span class="token punctuation">]</span> <span class="token comment">// 定义白名单</span>
router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
nprogress<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 开启进度条的意思</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 只有有token的情况下 才能获取资料</span>
<span class="token comment">// 如果有token</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/login'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 如果要访问的是 登录页</span>
<span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span> <span class="token comment">// 跳到主页 // 有token 用处理吗？不用</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 只有放过的时候才去获取用户资料</span>
<span class="token comment">// 是每次都获取吗</span>
<span class="token comment">// 如果当前vuex中有用户的资料的id 表示 已经有资料了 不需要获取了 如果没有id才需要获取</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>userId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 如果没有id才表示当前用户资料没有获取过</span>
<span class="token comment">// async 函数所return的内容 用 await就可以接收到</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> roles <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'user/getUserInfo'</span><span class="token punctuation">)</span>
<span class="token comment">// 如果说后续 需要根据用户资料获取数据的话 这里必须改成 同步</span>
<span class="token comment">// 筛选用户的可用路由</span>
<span class="token comment">// actions中函数 默认是Promise对象 调用这个对象 想要获取返回的值话 必须 加 await或者是then</span>
<span class="token comment">// actions是做异步操作的</span>
<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token keyword">await</span> store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'permission/filterRoutes'</span><span class="token punctuation">,</span> roles<span class="token punctuation">.</span>menus<span class="token punctuation">)</span>
<span class="token comment">// routes就是筛选得到的动态路由</span>
<span class="token comment">// 动态路由 添加到 路由表中 默认的路由表 只有静态路由 没有动态路由</span>
<span class="token comment">// addRoutes 必须 用 next(地址) 不能用next()</span>
router<span class="token punctuation">.</span><span class="token function">addRoutes</span><span class="token punctuation">(</span>routes<span class="token punctuation">)</span> <span class="token comment">// 添加动态路由到路由表 铺路</span>
<span class="token comment">// 添加完动态路由之后</span>
<span class="token function">next</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>path<span class="token punctuation">)</span> <span class="token comment">// 相当于跳到对应的地址 相当于多做一次跳转 为什么要多做一次跳转</span>
<span class="token comment">// 进门了，但是进门之后我要去的地方的路还没有铺好，直接走，掉坑里，多做一次跳转，再从门外往里进一次，跳转之前 把路铺好，再次进来的时候，路就铺好了</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 没有token的情况下</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>whiteList<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>path<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 表示要去的地址在白名单</span>
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
nprogress<span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 解决手动切换地址时 进度条不关闭的问题</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 后置守卫</span>
router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
nprogress<span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 关闭进度条</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br></div></div><h3 id="静态路由动态路由解除合并"><a href="#静态路由动态路由解除合并" class="header-anchor">#</a> 静态路由动态路由解除合并</h3> <p><strong>注意</strong>： 这里有个非常容易出问题的位置，当我们判断用户是否已经添加路由的前后，不能都是用<strong>next()</strong>，</p> <p>在添加路由之后应该使用 <strong>next(to.path)</strong>， 否则会使刷新页面之后 权限消失，这属于一个vue-router的<strong>已知缺陷</strong></p> <p>同时，不要忘记，我们将原来的静态路由 + 动态路由合体的模式 改成 只有静态路由 <strong><code>src/router/index.js</code></strong></p> <p><img src="/hrsass-notes/assets/img/image-20200730012805239.34d5a784.png" alt="image-20200730012805239"></p> <blockquote><p>此时，我们已经完成了权限设置的一半， 此时我们发现左侧菜单失去了内容，这是因为左侧菜单读取的是固定的路由，我们要把它换成实时的最新路由</p></blockquote> <p>在**<code>src/store/getters.js</code>**配置导出routes</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function-variable function">sidebar</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>app<span class="token punctuation">.</span>sidebar<span class="token punctuation">,</span>
<span class="token function-variable function">device</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>app<span class="token punctuation">.</span>device<span class="token punctuation">,</span>
<span class="token function-variable function">token</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>user<span class="token punctuation">.</span>token<span class="token punctuation">,</span>
<span class="token function-variable function">name</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>user<span class="token punctuation">.</span>userInfo<span class="token punctuation">.</span>username<span class="token punctuation">,</span> <span class="token comment">// 建立用户名称的映射</span>
<span class="token function-variable function">userId</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>user<span class="token punctuation">.</span>userInfo<span class="token punctuation">.</span>userId<span class="token punctuation">,</span> <span class="token comment">// 建立用户id的映射</span>
<span class="token function-variable function">companyId</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>user<span class="token punctuation">.</span>userInfo<span class="token punctuation">.</span>companyId<span class="token punctuation">,</span> <span class="token comment">// 建立用户的公司Id映射</span>
<span class="token function-variable function">routes</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=></span> state<span class="token punctuation">.</span>permission<span class="token punctuation">.</span>routes <span class="token comment">// 导出当前的路由</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> getters
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>在左侧菜单组件中， 引入routes</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> computed<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token string">'sidebar'</span><span class="token punctuation">,</span> <span class="token string">'routes'</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><blockquote><p>OK，到现在为止，我们已经可以实现不同用户登录的时候，菜单是动态的了</p></blockquote> <p><span style="background-color:red;color:#fff;">注意： ☆☆☆， 如果在拥有管理员角色的情况下不能拥有所有菜单，请检查router里面定义的路由里的name字段内容是否和后端数据库存储的标识符一致</span></p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> 前端权限应用-页面访问和菜单</p> <h2 id="登出时-重置路由权限和-404问题"><a href="#登出时-重置路由权限和-404问题" class="header-anchor">#</a> 登出时，重置路由权限和 404问题</h2> <p><strong>目标</strong>： 处理当登出页面时，路由不正确的问题</p> <blockquote><p>上一小节，我们看似完成了访问权限的功能，实则不然，因为当我们登出操作之后，虽然看不到菜单，但是用户实际上可以访问页面，直接在地址栏输入地址就能访问</p></blockquote> <p>这是怎么回事？</p> <blockquote><p>这是因为我们前面在<strong>addRoutes</strong>的时候，一直都是在<strong>加</strong>，登出的时候，我们并没有删，也没有重置，也就是说，我们之前加的路由在登出之后一直在，这怎么处理？</p></blockquote> <p>大家留意我们的<strong>router/index.js</strong>文件，发现一个重置路由方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 重置路由</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">resetRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> newRouter <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span>matcher <span class="token operator">=</span> newRouter<span class="token punctuation">.</span>matcher <span class="token comment">// 重新设置路由的可匹配路径</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>没错，这个方法就是将路由重新实例化，相当于换了一个新的路由，之前**<code>加的路由</code>**自然不存在了，只需要在登出的时候， 处理一下即可</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// store/modules/user.js </span>
<span class="token comment">// 导入重置路由方法</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> resetRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/router'</span>
<span class="token comment">// 登出的action</span>
<span class="token function">lgout</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 删除token</span>
context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'removeToken'</span><span class="token punctuation">)</span> <span class="token comment">// 不仅仅删除了vuex中的 还删除了缓存中的</span>
<span class="token comment">// 删除用户资料</span>
context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'removeUserInfo'</span><span class="token punctuation">)</span> <span class="token comment">// 删除用户信息</span>
<span class="token comment">// 重置路由</span>
<span class="token function">resetRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 还有一步 vuex中的数据是不是还在</span>
<span class="token comment">// 要清空permission模块下的state数据</span>
<span class="token comment">// vuex中 user子模块 permission子模块</span>
<span class="token comment">// 子模块调用子模块的action 默认情况下 子模块的context是子模块的</span>
<span class="token comment">// 父模块 调用 子模块的action</span>
context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'permission/setRoutes'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 子模块调用子模块的action 可以 将 commit的第三个参数 设置成 { root: true } 就表示当前的context不是子模块了 而是父模块</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>除此之外，我们发现在页面刷新的时候，本来应该拥有权限的页面出现了404，这是因为404的匹配权限放在了静态路由，而动态路由在没有addRoutes之前，找不到对应的地址，就会显示404，所以我们需要将404放置到动态路由的最后</p> <p><strong><code>src/permission.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>router<span class="token punctuation">.</span><span class="token function">addRoutes</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>routes<span class="token punctuation">,</span> <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> redirect<span class="token operator">:</span> <span class="token string">'/404'</span><span class="token punctuation">,</span> hidden<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 添加到路由表</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>提交代码</strong></p> <h2 id="功能权限应用"><a href="#功能权限应用" class="header-anchor">#</a> 功能权限应用</h2> <p><strong>目标</strong>： 实现功能权限的应用</p> <h3 id="功能权限的受控思路"><a href="#功能权限的受控思路" class="header-anchor">#</a> 功能权限的受控思路</h3> <blockquote><p>上小节中，当我们拥有了一个模块，一个页面的访问权限之后，页面中的某些功能，用户可能有，也可能没有，这就是功能权限</p></blockquote> <p>这就是上小节，查询出来的数据中的**<code>points</code>**</p> <blockquote><p>比如，我们想对员工管理的删除功能做个权限怎么做？</p></blockquote> <p>首先需要在员工管理的权限点下， 新增一个删除权限点，启用</p> <p><img src="/hrsass-notes/assets/img/image-20200730020732919.05321316.png" alt="image-20200730020732919"></p> <blockquote><p>我们要做的就是看看用户，是否拥有<strong>point-user-delete</strong>这个point，有就可以让删除能用，没有就隐藏或者禁用</p></blockquote> <h3 id="使用mixin技术将检查方法注入"><a href="#使用mixin技术将检查方法注入" class="header-anchor">#</a> 使用Mixin技术将检查方法注入</h3> <p>所以，我们可以采用一个新的技术 <a href="https://cn.vuejs.org/v2/guide/mixins.html" target="_blank" rel="noopener noreferrer">mixin(混入)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>来让所有的组件可以拥有一个公共的方法</p> <p><strong><code>src/mixin/checkPermission.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'@/store'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">checkPermission</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> userInfo <span class="token punctuation">}</span> <span class="token operator">=</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>user
<span class="token keyword">if</span> <span class="token punctuation">(</span>userInfo<span class="token punctuation">.</span>roles<span class="token punctuation">.</span>points <span class="token operator">&&</span> userInfo<span class="token punctuation">.</span>roles<span class="token punctuation">.</span>points<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> userInfo<span class="token punctuation">.</span>roles<span class="token punctuation">.</span>points<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item <span class="token operator">===</span> key<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><code>main.js</code>中导入注册混入</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 导入混入</span>
<span class="token keyword">import</span> checkPermission <span class="token keyword">from</span> <span class="token string">'@/mixin/checkPermission'</span>
Vue<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span>checkPermission<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>在员工组件中检查权限点</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>!checkPermission(<span class="token punctuation">'</span>POINT-USER-UPDATE<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$router.push(`/employees/detail/${obj.row.id}`)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>查看<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>此时，可以通过配置权限的方式，检查权限的可用性了</p> <p><strong>提交代码</strong></p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/hrsass-notes/assets/js/app.6c8c6ef7.js" defer></script><script src="/hrsass-notes/assets/js/2.dbebf407.js" defer></script><script src="/hrsass-notes/assets/js/7.aad1ab06.js" defer></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手