update

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+    }
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src/**/*"]
+}

src/directive/index.js

@@ -0,0 +1,53 @@
+/*
+ *
+ * 　　┏┓　　　┏┓+ +
+ * 　┏┛┻━━━┛┻┓ + +
+ * 　┃　　　　　　　┃
+ * 　┃　　　━　　　┃ ++ + + +
+ *  ████━████ ┃+
+ * 　┃　　　　　　　┃ +
+ * 　┃　　　┻　　　┃
+ * 　┃　　　　　　　┃ + +
+ * 　┗━┓　　　┏━┛
+ * 　　　┃　　　┃
+ * 　　　┃　　　┃ + + + +
+ * 　　　┃　　　┃
+ * 　　　┃　　　┃ +  神兽保佑
+ * 　　　┃　　　┃    代码无bug
+ * 　　　┃　　　┃　　+
+ * 　　　┃　 　　┗━━━┓ + +
+ * 　　　┃ 　　　　　　　┣┓
+ * 　　　┃ 　　　　　　　┏┛
+ * 　　　┗┓┓┏━┳┓┏┛ + + + +
+ * 　　　　┃┫┫　┃┫┫
+ * 　　　　┗┻┛　┗┻┛+ + + +
+ *
+ *
+ * @Descripttion:
+ * @version:
+ * @Date: 2021-09-01 13:58:08
+ * @LastEditors: huzhushan@126.com
+ * @LastEditTime: 2021-09-29 10:10:32
+ * @Author: huzhushan@126.com
+ * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
+ * @Github: https://github.com/huzhushan/vue3-element-admin
+ * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
+ */
+
+import store from '@/store'
+
+export const Permission = app => {
+  app.directive('permission', {
+    mounted: function(el, binding) {
+      const permissionList = store.state.account.permissionList || []
+
+      if (
+        binding.value &&
+        permissionList.every(item => item !== binding.value)
+      ) {
+        // 移除组件
+        el.parentNode.removeChild(el)
+      }
+    },
+  })
+}

src/main.js

@@ -27,7 +27,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-07-23 16:50:08
+ * @LastEditTime: 2021-09-29 10:08:00
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -64,6 +64,10 @@ Object.entries(Components).forEach(([key, component]) => {
   app.component(key, component)
 })
 
+// 注册自定义指令
+import * as Directives from '@/directive'
+Object.values(Directives).forEach(fn => fn(app))
+
 // 错误日志
 import useErrorHandler from './error-log'
 useErrorHandler(app)

src/permission.js

@@ -26,7 +26,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-09-18 17:43:01
+ * @LastEditTime: 2021-09-29 09:47:46
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -68,16 +68,17 @@ router.beforeEach(async to => {
     // 获取用户角色信息，根据角色判断权限
     let userinfo = store.state.account.userinfo
     if (!userinfo) {
+      const loadingInstance = ElLoading.service({
+        lock: true,
+        text: '正在加载数据，请稍候~',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
       try {
-        const loadingInstance = ElLoading.service({
-          lock: true,
-          text: '正在加载数据，请稍候~',
-          background: 'rgba(0, 0, 0, 0.7)',
-        })
         // 获取用户信息
         userinfo = await store.dispatch('account/getUserinfo')
         loadingInstance.close()
       } catch (err) {
+        loadingInstance.close()
         return false
       }
 
@@ -90,16 +91,17 @@ router.beforeEach(async to => {
 
     // 生成菜单（如果你的项目有动态菜单，在此处会添加动态路由）
     if (store.state.menu.menus.length <= 0) {
+      const loadingInstance = ElLoading.service({
+        lock: true,
+        text: '正在加载数据，请稍候~',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
       try {
-        const loadingInstance = ElLoading.service({
-          lock: true,
-          text: '正在加载数据，请稍候~',
-          background: 'rgba(0, 0, 0, 0.7)',
-        })
         await store.dispatch('menu/generateMenus', userinfo)
         loadingInstance.close()
         return to.fullPath // 添加动态路由后，必须加这一句触发重定向，否则会404
       } catch (err) {
+        loadingInstance.close()
         return false
       }
     }

src/store/modules/account.js

@@ -3,7 +3,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 09:34:04
+ * @LastEditTime: 2021-09-29 10:10:14
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -15,6 +15,7 @@ export default {
   namespaced: true,
   state: {
     userinfo: null,
+    permissionList: [],
   },
   mutations: {
     // 保存用户信息

升级.txt

@@ -3,10 +3,10 @@
 更新App.vue国际化配置
 defaultSettings：重命名、增加menus.isShow
 permission.js增加loading
-permission.js增加404页面白名单
 permission.js删除所有动态路由
 退出的时候清空标签栏和menus
 tags增加清空标签栏的mutations
 404页面路由修改
 增加公共hooks
-增加树形下拉组件
+增加树形下拉组件
+增加(按钮、组件等)权限控制自定义指令