权判断

src/directives/index.js

+import permission from './permission'
+
+export default {
+  install(Vue) {
+    Vue.directive('permission', permission)
+  }
+}

src/directives/permission.js

+import { hasPermission } from '../utils/hasPermission'
+
+export default {
+  inserted: function(el, binding) {
+    let { value, modifiers } = binding
+    // 通过|分割开的权限,满足任意一种即可. 此处可以自己拓展&来处理[且]的关系,
+    // 更复杂的 &| 的关系可以 v-if="hasPerm('a:b') & .. | .." 来实现
+    let keys =
+      value && value.trim() !== '' ? value.split('|') : Object.keys(modifiers)
+    if (keys && keys.length) {
+      let hasAuth = keys.some(key => hasPermission(key))
+      !hasAuth && el.parentNode.removeChild(el)
+    }
+  }
+}

src/main.js

@@ -12,6 +12,7 @@ import axios from 'axios'
 import store from './store/store'
 import JsonViewer from 'vue-json-viewer'
 import bus from '../src/utils/bus'
+import directives from '@/directives'
 
 // import Sortable from 'sortablejs'
 import {
@@ -97,6 +98,7 @@ Vue.use(Row)
 Vue.use(Col)
 Vue.use(JsonViewer)
 Vue.use(Tooltip)
+Vue.use(directives)
 
 // Vue.use(Sortable)
 /* eslint-disable no-new */

src/store/modules/user.js

 const state = {
-  userId: '123',
+  userId: '',
   username: '',
   menuList: [],
   roleIds: [],
@@ -7,8 +7,8 @@ const state = {
 }
 
 const mutations = {
-  SET_USER: (state, userInfo) => {
-    state.userId = userInfo.id
+  SET_USER(state, userInfo) {
+    state.userId = userInfo.userId
     state.username = userInfo.username
     state.menuList = userInfo.menuList
     state.roleIds = userInfo.roleIds
@@ -25,12 +25,16 @@ const mutations = {
 const getters = {
   UserId: state => {
     return state.userId
+  },
+  PermissionList: state => {
+    return state.permissionCodeList
   }
 }
+// 异步获取用户信息
 const actions = {
   userMsg(context, userInfo) {
     console.log('用户信息', userInfo)
-    context.commit('SET_USER', userInfo)
+    context.commit('SET_USER', userInfo.userInfo)
   }
 }
 

src/utils/hasPermission.js

+// import store from '../store/store'
+
+export function hasPermission(permission) {
+  permission = permission.trim()
+  let myPermissions = this.$store.user.getters.PermissionList
+  console.log('111', myPermissions)
+  return myPermissions.indexOf(permission) > -1
+}

src/views/auto/ProjectList.vue

@@ -6,7 +6,7 @@
         <el-button type="primary" icon="el-icon-search" @click="searchMockList">查询</el-button> -->
         <!-- <el-button type="primary" icon="el-icon-circle-plus" @click="DialogAddVisible=true">新增</el-button> -->
 
-        <el-button type="primary" icon="el-icon-circle-plus" @click="DialogAddVisible=true">新增</el-button>
+        <el-button type="primary" icon="el-icon-circle-plus" @click="DialogAddVisible=true" v-permission="'auto:project:add'">新增</el-button>
       </div>
       <el-table :data="projectList" border style="width: 100%;margin-top:20px">
         <el-table-column type='index' width="50px">
@@ -61,6 +61,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import {
   getProjectList,
   addProject,
@@ -112,6 +113,12 @@ export default {
   created() {
     this.getProjectList()
   },
+  computed: {
+    ...mapGetters({
+      // 获取权限信息
+      getPermissionList: 'user/PermissionList'
+    })
+  },
   methods: {
     // 获取项目列表
     getProjectList() {

src/views/layout/leftAside/Aside.vue

@@ -93,9 +93,14 @@ export default {
     // 获取用户详细信息
     getUserDetail() {
       getUserDetail().then((resp) => {
-        this.$store.dispatch('user/userMsg', {
-          userInfo: resp.data.data
-        })
+        // 异步调用action
+        // this.$store.dispatch('user/userMsg', {
+        //   userInfo: resp.data.data
+        // })
+
+        // 同步赋值mutations
+        this.$store.commit('user/SET_USER', resp.data.data)
+
         console.log(this.getUserId)
         this.menuList = resp.data.data.menuList
         this.getNav()
@@ -109,6 +114,7 @@ export default {
     },
     ...mapGetters({
       getCollapseState: 'header/CollapseState',
+      // 获取用户信息
       getUserId: 'user/UserId'
     })
   },