增加权限指令

src/directive/permission/permission.js

@@ -2,14 +2,13 @@ import store from '@/store'
 
 function checkPermission(el, binding) {
   const { value } = binding
-  const roles = store.getters && store.getters.roles
-
+  const btns = store.getters && store.getters.btns
   if (value && value instanceof Array) {
     if (value.length > 0) {
-      const permissionRoles = value
+      const permissionBtns = value
 
-      const hasPermission = roles.some(role => {
-        return permissionRoles.includes(role)
+      const hasPermission = btns.some(btn => {
+        return permissionBtns.includes(btn)
       })
 
       if (!hasPermission) {

src/permission.js

@@ -27,8 +27,8 @@ router.beforeEach(async(to, from, next) => {
       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else {
       // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = store.getters.roles && store.getters.roles.length > 0
-      if (hasRoles) {
+      const hasPages = store.getters.pages && store.getters.pages.length > 0
+      if (hasPages) {
         next()
       } else {
         try {

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/user'
+import { login, getInfo } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
 

src/utils/permission.js

@@ -7,11 +7,11 @@ import store from '@/store'
  */
 export default function checkPermission(value) {
   if (value && value instanceof Array && value.length > 0) {
-    const roles = store.getters && store.getters.roles
-    const permissionRoles = value
+    const btns = store.getters && store.getters.btns
+    const permissionBtns = value
 
-    const hasPermission = roles.some(role => {
-      return permissionRoles.includes(role)
+    const hasPermission = btns.some(btn => {
+      return permissionBtns.includes(btn)
     })
     return hasPermission
   } else {

src/views/dashboard/index.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">name: {{ name }}</div>
-    <el-button v-if="checkPermission(['admin'])">默认按钮</el-button>
-    <el-button v-if="checkPermission(['editor'])" type="primary">主要按钮</el-button>
-    <el-button v-permission="['admin']">默认按钮</el-button>
-    <el-button v-if="checkPermission(['editor'])" type="primary">主要按钮</el-button>
+    <div class="dashboard-text">name: {{ user.nickName }}</div>
+    <el-button v-permission="['system:user:resetPwd']">默认按钮</el-button>
+    <el-button v-if="checkPermission(['system:user:resetPwd'])" type="primary">主要按钮</el-button>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import permission from '@/directive/permission/index.js' // 权限判断指令
-import checkPermission from '@/utils/permission' // 权限判断函数
+import checkPermission from '@/utils/permission.js' // 权限判断函数
 
 export default {
   name: 'Dashboard',
   directives: { permission },
   computed: {
     ...mapGetters([
-      'name'
+      'user'
     ])
   },
   methods: {