From 50e01bf64f9b7074bebec217b847d9f7c877ddc5 Mon Sep 17 00:00:00 2001
From: Blues Young <15171255945@163.com>
Date: Fri, 25 Feb 2022 16:23:32 +0800
Subject: [PATCH 1/4] feat: :sparkles: temp

---
 src/layout/AppMain/index.vue            |  4 +-
 src/layout/NavBar/index.vue             | 17 ++++---
 src/layout/Sidebar/index.vue            | 10 ++--
 src/layout/TagsView/index.vue           |  9 ++--
 src/layout/components/HeadNav/index.vue | 11 +++--
 src/layout/components/Logo/index.vue    | 10 ++--
 src/layout/index.vue                    | 10 ++--
 src/main.ts                             | 29 ++++++-----
 src/modules/auth.ts                     | 65 +++++++++++++++++++++++++
 src/modules/pinia.ts                    |  5 +-
 src/permission.ts                       |  9 ++--
 src/plugins/extension/piniaStorage.ts   | 10 ++++
 src/store/index.ts                      |  4 +-
 src/store/sessionStorage/index.ts       | 42 +---------------
 src/store/useTagsStore.ts               |  2 +-
 src/store/useUserStore.ts               | 30 ++++++++++++
 src/util/generateUserInfo.ts            | 19 +++-----
 src/views/base/login.vue                | 16 +++---
 18 files changed, 190 insertions(+), 112 deletions(-)
 create mode 100644 src/modules/auth.ts
 create mode 100644 src/plugins/extension/piniaStorage.ts
 create mode 100644 src/store/useUserStore.ts

diff --git a/src/layout/AppMain/index.vue b/src/layout/AppMain/index.vue
index 6a6dd26..af90ab0 100644
--- a/src/layout/AppMain/index.vue
+++ b/src/layout/AppMain/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-10 17:07:36
- * @LastEditTime: 2022-02-24 16:56:44
+ * @LastEditTime: 2022-02-24 18:44:29
  * @Description: 所有的子页面都在此组件内部显示
 -->
 <template>
@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
-import { useTagsStore } from '../../store/useTagsStore';
+import { useTagsStore } from '../../store';
 const route = useRoute();
 const { cachedViews, visitedViews } = storeToRefs(useTagsStore());
 const path = computed(() => route.path);
diff --git a/src/layout/NavBar/index.vue b/src/layout/NavBar/index.vue
index 4c3f4ed..1faab69 100644
--- a/src/layout/NavBar/index.vue
+++ b/src/layout/NavBar/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-10 11:30:30
- * @LastEditTime: 2022-01-13 10:31:08
+ * @LastEditTime: 2022-02-24 18:47:49
  * @Description: 顶部导航栏组件
 -->
 <template>
   <!-- 导航栏组件 -->
   <div class="navbar">
-    <hamburger v-model="APP_CONFIG.sidebar_opened" class="hamburger-container" />
+    <hamburger v-model="AppConfig.sidebar_opened" class="hamburger-container" />
     <head-nav />
     <!-- 右侧个人中心下拉框 -->
     <div class="right-menu">
@@ -83,16 +83,17 @@
 import { CaretBottom } from '@element-plus/icons';
 import type { FormRulesMap } from 'element-plus/lib/components/form/src/form.type';
 import { login_out, modifyPassword } from '../../api/user';
-import { USER_INFO, APP_CONFIG } from '../../store';
+import Hamburger from '../components/Hamburger/index.vue';
+import HeadNav from '../components/HeadNav/index.vue';
+import { useUserStore } from '../../store';
+import { storeToRefs } from 'pinia';
 import { removeToken } from '../../util/auth';
 import { toFullScreen, exitFullscreen } from '../../util/browser';
 import { useToggle } from '../../util/tool';
 const [isFull, toggleFullScreen] = useToggle(toFullScreen, exitFullscreen);
-import Hamburger from '../components/Hamburger/index.vue';
-import HeadNav from '../components/HeadNav/index.vue';
 
 const router = useRouter();
-
+const { UserInfo, AppConfig } = storeToRefs(useUserStore());
 const formRef = ref<any>(null);
 const form = ref({
   old_pwd: '',
@@ -119,8 +120,8 @@ const formRules: FormRulesMap = {
   ]
 };
 const isEdit = ref(false);
-const admin_name = computed(() => USER_INFO.value?.admin_name);
-const role_name = computed(() => USER_INFO.value?.role_name?.[0]);
+const admin_name = computed(() => UserInfo.value?.admin_name);
+const role_name = computed(() => UserInfo.value?.role_name?.[0]);
 
 const loginOut = async () => {
   await login_out();
diff --git a/src/layout/Sidebar/index.vue b/src/layout/Sidebar/index.vue
index 0668e28..e38bcff 100644
--- a/src/layout/Sidebar/index.vue
+++ b/src/layout/Sidebar/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-10 15:46:00
- * @LastEditTime: 2022-02-24 17:33:21
+ * @LastEditTime: 2022-02-24 19:05:41
  * @Description: 侧边栏组件
 -->
 <template>
@@ -17,7 +17,7 @@
         text-color="#bfcbd9"
         mode="vertical"
       >
-        <sidebar-item v-for="(route, index) in LEFT_NAV" :key="index + 'vdksjhgfew54654cds'" :item="route" />
+        <sidebar-item v-for="(route, index) in LeftNav" :key="index + 'vdksjhgfew54654cds'" :item="route" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -25,10 +25,10 @@
 <script lang="ts" setup>
 import Logo from '../components/Logo/index.vue';
 import SidebarItem from '../components/SidebarItem/index.vue';
-import { APP_CONFIG, LEFT_NAV } from '../../store';
 import { storeToRefs } from 'pinia';
-import { useTagsStore } from '../../store/useTagsStore';
+import { useTagsStore, useUserStore } from '../../store';
 const { currentMenuIndex } = storeToRefs(useTagsStore());
 const showLogo = ref(true);
-const isCollapse = computed(() => APP_CONFIG.value.sidebar_opened);
+const { LeftNav, AppConfig } = storeToRefs(useUserStore());
+const isCollapse = computed(() => AppConfig.value.sidebar_opened);
 </script>
diff --git a/src/layout/TagsView/index.vue b/src/layout/TagsView/index.vue
index 1773dd1..27dcc13 100644
--- a/src/layout/TagsView/index.vue
+++ b/src/layout/TagsView/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-11 13:35:58
- * @LastEditTime: 2022-02-24 17:30:54
+ * @LastEditTime: 2022-02-24 19:08:28
  * @Description: 标签选项卡组件
 -->
 <template>
@@ -37,10 +37,9 @@
 <script lang="ts" setup>
 import YoungContextMenu from '../../components/YoungContextMenu/index.vue';
 import ScrollPane from '../components/ScrollPane/index.vue';
-import { ALL_ROUTES } from '../../store';
 import { Close as CloseIcon } from '@element-plus/icons';
 import { storeToRefs } from 'pinia';
-import { useTagsStore } from '../../store/useTagsStore';
+import { useTagsStore, useUserStore } from '../../store';
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
 
 const showContextMenu = ref(false);
@@ -161,9 +160,9 @@ const filterAffixTags = (routes: (RouteRecordRaw | RouteLocationNormalized)[], b
   });
   return tags;
 };
-
+const { AllRoutes } = storeToRefs(useUserStore());
 const initTags = () => {
-  affixTags.value = filterAffixTags(ALL_ROUTES.value);
+  affixTags.value = filterAffixTags(AllRoutes.value);
   for (const tag of affixTags.value) {
     tag.name && tagsState.addView(tag);
   }
diff --git a/src/layout/components/HeadNav/index.vue b/src/layout/components/HeadNav/index.vue
index f348b46..3a3663d 100644
--- a/src/layout/components/HeadNav/index.vue
+++ b/src/layout/components/HeadNav/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-10 10:10:36
- * @LastEditTime: 2021-09-17 16:23:46
+ * @LastEditTime: 2022-02-24 19:03:06
  * @Description: 顶部导航(一级节点)
 -->
 <template>
@@ -10,11 +10,14 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { NAV_ARR, LEFT_NAV } from '../../../store';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '../../../store';
 import { HEAD_NAV_INDEX } from '../../../store';
 
+const { NavArr, LeftNav } = storeToRefs(useUserStore());
+
 // 获取顶部导航栏数据(一级节点)
-const routes = computed(() => NAV_ARR.value.filter((item) => item.is_show === 1));
+const routes = computed(() => NavArr.value.filter((item) => item.is_show === 1));
 const headMenu = computed(() => routes.value.map((item, index) => {
   const temp: TabItem = { label: item.node_name, name: index + '' };
   return temp;
@@ -23,7 +26,7 @@ const headMenu = computed(() => routes.value.map((item, index) => {
 watchEffect(() => {
   const route = routes.value[+HEAD_NAV_INDEX.value];
   // 更新对应的侧边导航栏数据(二级节点及以后)
-  LEFT_NAV.value = deepClone(route.part);
+  LeftNav.value = deepClone(route.part);
 });
 </script>
 
diff --git a/src/layout/components/Logo/index.vue b/src/layout/components/Logo/index.vue
index a9eaff9..8bea939 100644
--- a/src/layout/components/Logo/index.vue
+++ b/src/layout/components/Logo/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-10 14:10:09
- * @LastEditTime: 2021-09-17 16:23:55
+ * @LastEditTime: 2022-02-24 19:06:44
  * @Description: 侧边栏 logo 组件
 -->
 <template>
   <div class="sidebar-logo-container" :class="collapse ? 'collapse' : ''">
     <transition name="sidebarLogoFade">
-      <router-link v-if="!APP_CONFIG.sidebar_opened" key="collapse" class="sidebar-logo-link" to="/">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <icon-logos-vue class="sidebar-logo-hide" />
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
@@ -18,10 +18,12 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { APP_CONFIG } from '../../../store';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '../../../store';
 
+const { AppConfig } = storeToRefs(useUserStore());
 const title = import.meta.env.VITE_TITLE??'小黑后台';
-const collapse = computed(() => !APP_CONFIG.value.sidebar_opened);
+const collapse = computed(() => !AppConfig.value.sidebar_opened);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6d0793a..21166d3 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-10 17:14:23
- * @LastEditTime: 2021-09-17 16:23:10
+ * @LastEditTime: 2022-02-24 19:07:25
  * @Description: 整体布局
 -->
 <template>
@@ -19,12 +19,14 @@
 </template>
 <script lang="ts" setup>
 import { NavBar, Sidebar, AppMain, TagsView } from './AppMain/index';
-import { APP_CONFIG } from '../store';
+import { useUserStore } from '../store';
+import { storeToRefs } from 'pinia';
+const { AppConfig } = storeToRefs(useUserStore());
 // sidebar 与组件重名，会导致解析异常
 const classObj = computed(() => {
   return {
-    hideSidebar: !APP_CONFIG.value.sidebar_opened,
-    openSidebar: APP_CONFIG.value.sidebar_opened
+    hideSidebar: !AppConfig.value.sidebar_opened,
+    openSidebar: AppConfig.value.sidebar_opened
   };
 });
 </script>
diff --git a/src/main.ts b/src/main.ts
index b122250..2c31f7f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,8 @@
+import { useUserStore } from './store/useUserStore';
 /*
  * @Author: zhangyang
  * @Date: 2021-02-24 11:28:17
- * @LastEditTime: 2022-02-24 15:43:43
+ * @LastEditTime: 2022-02-24 19:04:38
  * @Description: 项目入口文件
  */
 
@@ -20,11 +21,10 @@ import 'element-plus/dist/index.css';
 // import 'element-plus/theme-chalk/el-message-box.css';
 // 引入 VueRouter
 import Router, { routes } from './route/index';
-import { ALL_ROUTES } from './store';
 // 引入路由导航守卫
-import './permission';
-import { getToken } from './util/auth';
-import { generateUserInfo } from './util/generateUserInfo';
+// import './permission';
+// import { getToken } from './util/auth';
+// import { generateUserInfo } from './util/generateUserInfo';
 
 // 统一浏览器样式
 import 'normalize.css/normalize.css';
@@ -33,27 +33,30 @@ import '@/styles/index.scss';
 
 import { createApp } from 'vue';
 import App from './App.vue';
+import { storeToRefs } from 'pinia';
 
 // 引入 console.log 美化
 // import './assets/js/console-butifull';
-(async () => {
-  // 刷新页面的时候，如果存在 token 就直接获取导航栏列表
-  if (getToken().token) {
-    generateUserInfo();
-  }
-})();
+// (async () => {
+//   // 刷新页面的时候，如果存在 token 就直接获取导航栏列表
+//   if (getToken().token) {
+//     generateUserInfo();
+//   }
+// })();
 
 // 创建应用实例
 const app = createApp(App);
 // 使用路由
 app.use(Router);
-// 初始化路由表
-ALL_ROUTES.value = deepClone(routes);
 
 // 批量安装模块
 Object.values(
   import.meta.globEager('./modules/*.ts')
 ).map(({ install }) => install(app));
 
+// 初始化路由表
+const { AllRoutes } = storeToRefs(useUserStore());
+AllRoutes.value = deepClone(routes);
+
 // 挂载应用
 app.mount('#app');
diff --git a/src/modules/auth.ts b/src/modules/auth.ts
new file mode 100644
index 0000000..d817d20
--- /dev/null
+++ b/src/modules/auth.ts
@@ -0,0 +1,65 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-02-24 19:21:36
+ * @LastEditTime: 2022-02-24 19:30:19
+ * @Description: 权限控制
+ */
+import type { YoungModule } from '../types';
+import router from '../route';
+import commonRoutes from '../route/common/index';
+
+import { getToken } from '../util/auth';
+import type { RouteLocationNormalized } from 'vue-router';
+import { storeToRefs } from 'pinia';
+const getCommonRoutes = () => {
+  const routesArr: string[] = [];
+  for (const route of commonRoutes) {
+    if (route.children?.length) {
+      for (const sub of route.children) {
+        routesArr.push(sub.path);
+      }
+    } else {
+      routesArr.push(route.path);
+    }
+  }
+  return routesArr;
+};
+
+const hasPermission = async (route: RouteLocationNormalized | string) => {
+  const { useUserStore } = await import('../store');
+  const { RoleRoute } = storeToRefs(useUserStore());
+
+  const roleRoute = RoleRoute.value.concat(getCommonRoutes());
+  if (typeof route === 'string') {
+    return roleRoute.includes(route);
+  }
+  return roleRoute.includes(route.path) || roleRoute.includes(route.fullPath);
+};
+
+export const install: YoungModule = (app) => {
+  router.beforeEach(async (to, from, next) => {
+    document.title = (to.meta.title as string) || '小黑后台';
+
+    // 此处添加鉴权
+    if (!getToken().token && to.name !== 'login') {
+      await ElMessageBox.confirm('未登录或登录信息过期，请先去登录', '提示', {
+        type: 'error',
+        showCancelButton: false,
+        closeOnClickModal: false,
+      }).catch(() => null);
+      next({
+        name: 'login',
+        query: {
+          redirect: to.path
+        }
+      });
+
+    } else if (!hasPermission(to)) {
+      // 具体页面权限 map 判断
+      ElMessage.error('暂时无权访问该页面，请勿进行恶意操作');
+      next(from.path);
+    } else {
+      next();
+    }
+  });
+};
diff --git a/src/modules/pinia.ts b/src/modules/pinia.ts
index fb6e5cd..c7e49f1 100644
--- a/src/modules/pinia.ts
+++ b/src/modules/pinia.ts
@@ -1,13 +1,14 @@
 /*
  * @Author: zhangyang
  * @Date: 2022-02-24 15:00:52
- * @LastEditTime: 2022-02-24 15:13:36
+ * @LastEditTime: 2022-02-24 19:45:29
  * @Description: pinia
  */
 import { createPinia } from 'pinia';
 import type { YoungModule } from '../types';
-
+import { piniaStorage } from '../plugins/extension/piniaStorage';
 export const install: YoungModule = (app) => {
   const pinia = createPinia();
+  pinia.use(piniaStorage);
   app.use(pinia);
 };
diff --git a/src/permission.ts b/src/permission.ts
index 2eda083..6989c9b 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -1,16 +1,17 @@
 /*
  * @Author: zhangyang
  * @Date: 2020-12-09 17:21:19
- * @LastEditTime: 2022-02-24 15:12:08
+ * @LastEditTime: 2022-02-25 16:00:00
  * @Description: 页面权限控制
  */
 import router from './route/index';
 import commonRoutes from './route/common/index';
 
 import { getToken } from './util/auth';
-import { ROLE_ROUTE } from './store';
+import { useUserStore } from './store';
 import type { RouteLocationNormalized } from 'vue-router';
-
+import { storeToRefs } from 'pinia';
+const { RoleRoute } = storeToRefs(useUserStore());
 const getCommonRoutes = () => {
   const routesArr: string[] = [];
   for (const route of commonRoutes) {
@@ -26,7 +27,7 @@ const getCommonRoutes = () => {
 };
 
 const hasPermission = (route: RouteLocationNormalized | string) => {
-  const roleRoute = ROLE_ROUTE.value.concat(getCommonRoutes());
+  const roleRoute = RoleRoute.value.concat(getCommonRoutes());
   if (typeof route === 'string') {
     return roleRoute.includes(route);
   }
diff --git a/src/plugins/extension/piniaStorage.ts b/src/plugins/extension/piniaStorage.ts
new file mode 100644
index 0000000..717fda2
--- /dev/null
+++ b/src/plugins/extension/piniaStorage.ts
@@ -0,0 +1,10 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-02-24 19:42:12
+ * @LastEditTime: 2022-02-24 19:46:19
+ * @Description: pinia 存储固化
+ */
+import type { PiniaPlugin } from 'pinia';
+export const piniaStorage: PiniaPlugin = ({ pinia, store }) => {
+  console.log(pinia.state.value);
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index b5a093d..2c7271c 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,8 +1,10 @@
 /*
  * @Author: zhangyang
  * @Date: 2021-09-17 16:21:54
- * @LastEditTime: 2022-02-24 17:33:26
+ * @LastEditTime: 2022-02-24 18:44:18
  * @Description:
  */
 export * from './sessionStorage';
 export * from './localStorage';
+export * from './useTagsStore';
+export * from './useUserStore';
diff --git a/src/store/sessionStorage/index.ts b/src/store/sessionStorage/index.ts
index 3b97d5b..0a588f5 100644
--- a/src/store/sessionStorage/index.ts
+++ b/src/store/sessionStorage/index.ts
@@ -1,64 +1,24 @@
 /*
  * @Author: zhangyang
  * @Date: 2020-12-10 09:01:29
- * @LastEditTime: 2022-02-24 17:29:10
+ * @LastEditTime: 2022-02-24 19:08:48
  * @Description: 全局所有的 sessionStorage 存储
  */
 import { useSessionStorage } from '@vueuse/core';
-import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
 
 enum KEYS  {
-  /**
-   * 存储用户信息信息
-   */
-  USER_INFO = 'user_info',
-  /**
-   * 存储用户导航栏信息
-   */
-  NAV_ARR = 'nav_arr',
-  /**
-   * 存储用户拥有访问权限的路由节点
-   */
-  ROLE_ROUTE = 'role_route',
   /**
    * 存储节点列表中节点的打开快照
    */
   SYSTEM_OPEN_KEYS = 'system_open_keys',
-  /**
-   * 网站全局配置
-   */
-  APP_CONFIG = 'app_config',
-  /**
-   * 侧边导航数组
-   */
-  LEFT_NAV = 'left_nav',
-  /**
-   * 所有的路由记录
-   */
-  ALL_ROUTES = 'all_routes',
   /**
    * 是否使用真实服务器
    */
   USE_REAL_SERVER = 'use_real_server'
 };
 
-
-export const USER_INFO = useSessionStorage<UserInfo>(KEYS.USER_INFO, {} as any);
-
-export const NAV_ARR = useSessionStorage<NavArrItem[]>(KEYS.NAV_ARR, []);
-
-export const ROLE_ROUTE = useSessionStorage<string[]>(KEYS.ROLE_ROUTE, []);
-
 export const SYSTEM_OPEN_KEYS = useSessionStorage<string[]>(KEYS.SYSTEM_OPEN_KEYS, []);
 
-export const APP_CONFIG = useSessionStorage<App_Config>(KEYS.APP_CONFIG, {
-  sidebar_opened: true
-} as App_Config);
-
-export const LEFT_NAV = useSessionStorage<NavArrItem[]>(KEYS.LEFT_NAV, []);
-
-export const ALL_ROUTES = useSessionStorage<(RouteRecordRaw | RouteLocationNormalized)[]>(KEYS.ALL_ROUTES, []);
-
 export const USE_REAL_SERVER = useSessionStorage<boolean>(KEYS.USE_REAL_SERVER,
   !!import.meta.env.VITE_ENABLE_PI
   // https 里面不允许发起 http 请求
diff --git a/src/store/useTagsStore.ts b/src/store/useTagsStore.ts
index faa890e..10109b9 100644
--- a/src/store/useTagsStore.ts
+++ b/src/store/useTagsStore.ts
@@ -23,7 +23,7 @@ interface TagsViewState {
    */
   currentMenuIndex: string;
 };
-export const useTagsStore = defineStore('app-tags', {
+export const useTagsStore = defineStore('useTagsStore', {
   state: () => {
     const state = reactive<TagsViewState>({
       visitedViews: [],
diff --git a/src/store/useUserStore.ts b/src/store/useUserStore.ts
new file mode 100644
index 0000000..9c68a93
--- /dev/null
+++ b/src/store/useUserStore.ts
@@ -0,0 +1,30 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-02-24 17:49:16
+ * @LastEditTime: 2022-02-24 19:15:42
+ * @Description: 存储用户相关信息
+ */
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import type { RouteRecordRaw } from 'vue-router';
+import { routes } from '../route';
+
+export const useUserStore = defineStore('useUserStore', () => {
+  const UserInfo = ref<UserInfo>();
+  const NavArr = ref<NavArrItem[]>([]);
+  const LeftNav = ref<NavArrItem[]>([]);
+  const RoleRoute = ref<string[]>([]);
+  const AppConfig = ref<App_Config>({
+    sidebar_opened: true
+  });
+  const AllRoutes = ref<RouteRecordRaw[]>(deepClone(routes));
+  return {
+    UserInfo,
+    NavArr,
+    LeftNav,
+    RoleRoute,
+    AppConfig,
+    AllRoutes
+  };
+});
+
+import.meta.hot && import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
diff --git a/src/util/generateUserInfo.ts b/src/util/generateUserInfo.ts
index 1735005..7790066 100644
--- a/src/util/generateUserInfo.ts
+++ b/src/util/generateUserInfo.ts
@@ -1,14 +1,15 @@
 /*
  * @Author: zhangyang
  * @Date: 2020-12-10 08:57:28
- * @LastEditTime: 2021-09-17 16:24:44
+ * @LastEditTime: 2022-02-24 19:12:47
  * @Description: 获取用户详细信息及其拥有权限的路由
  */
 import { getUserInfo } from '../api/user';
-import { USER_INFO, NAV_ARR, ROLE_ROUTE } from '../store';
+import { useUserStore } from '../store';
 // 使用前端权限控制时引入
 // import { commonNavArr, adminNavArr } from '../route/navArr';
 import { getUrl } from '../route/navMap';
+import { storeToRefs } from 'pinia';
 
 
 let role_route: string[] = [];
@@ -28,8 +29,8 @@ const generateRoleRoute = (arr: NavArrItem[], num?: number): string[] => {
   }
   return role_route;
 };
-
-const generateUserInfo = async () => {
+const { UserInfo, NavArr, RoleRoute } = storeToRefs(useUserStore());
+export const generateUserInfo = async () => {
   const infoObj = await getUserInfo();
   if (infoObj) {
     const {
@@ -60,14 +61,10 @@ const generateUserInfo = async () => {
     // 生成角色有权访问的路由
     const roleRoute: string[] = routes.map((route) => getUrl(route));
 
-    USER_INFO.value = deepClone(userInfo);
-    NAV_ARR.value = deepClone(navArr);
-    ROLE_ROUTE.value = deepClone(roleRoute);
+    UserInfo.value = deepClone(userInfo);
+    NavArr.value = deepClone(navArr);
+    RoleRoute.value = deepClone(roleRoute);
   } else {
     return;
   }
 };
-
-export {
-  generateUserInfo
-};
diff --git a/src/views/base/login.vue b/src/views/base/login.vue
index 971ddbb..9df6fe4 100644
--- a/src/views/base/login.vue
+++ b/src/views/base/login.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-03 14:25:49
- * @LastEditTime: 2021-12-31 17:38:46
+ * @LastEditTime: 2022-02-24 18:51:04
  * @Description: 登录
 -->
 <template>
@@ -43,7 +43,8 @@ import type { FormRulesMap } from 'element-plus/es/components/form/src/form.type
 import { login } from '../../api/user';
 import { setToken } from '../../util/auth';
 import { generateUserInfo } from '../../util/generateUserInfo';
-import { ALL_ROUTES, LEFT_NAV, NAV_ARR, ROLE_ROUTE, SYSTEM_OPEN_KEYS, USER_INFO, USE_REAL_SERVER } from '../../store';
+import { SYSTEM_OPEN_KEYS, USE_REAL_SERVER, useUserStore } from '../../store';
+import { storeToRefs } from 'pinia';
 
 interface LoginForm {
   username: string;
@@ -52,13 +53,14 @@ interface LoginForm {
 /**
  * 清除历史数据，避免 mock 数据对真实访问请求造成影响
  */
-USER_INFO.value = {} as any;
-NAV_ARR.value = [];
-ROLE_ROUTE.value = [];
 SYSTEM_OPEN_KEYS.value = [];
-LEFT_NAV.value = [];
-ALL_ROUTES.value = [];
 
+const { AllRoutes, UserInfo, RoleRoute, NavArr, LeftNav } = storeToRefs(useUserStore());
+AllRoutes.value = [];
+UserInfo.value = undefined;
+NavArr.value = [];
+LeftNav.value = [];
+RoleRoute.value = [];
 /**
  * 路由实例，记录当前路径之类的
  */
-- 
Gitee


From 06fcb0446952cdc690f63b2e7920e83767eb6a7a Mon Sep 17 00:00:00 2001
From: BluesYoung-web <15171255945@163.com>
Date: Sat, 26 Feb 2022 15:52:12 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20:bug:=20bug=20=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/HeadNav/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/components/HeadNav/index.vue b/src/layout/components/HeadNav/index.vue
index 3a3663d..3720584 100644
--- a/src/layout/components/HeadNav/index.vue
+++ b/src/layout/components/HeadNav/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-10 10:10:36
- * @LastEditTime: 2022-02-24 19:03:06
+ * @LastEditTime: 2022-02-26 15:46:36
  * @Description: 顶部导航(一级节点)
 -->
 <template>
@@ -26,7 +26,7 @@ const headMenu = computed(() => routes.value.map((item, index) => {
 watchEffect(() => {
   const route = routes.value[+HEAD_NAV_INDEX.value];
   // 更新对应的侧边导航栏数据(二级节点及以后)
-  LeftNav.value = deepClone(route.part);
+  LeftNav.value = deepClone(route?.part ?? []);
 });
 </script>
 
-- 
Gitee


From 726736f86548b55effc58163549ce5e35d4a4a10 Mon Sep 17 00:00:00 2001
From: BluesYoung-web <15171255945@163.com>
Date: Sat, 26 Feb 2022 16:16:32 +0800
Subject: [PATCH 3/4] =?UTF-8?q?chore:=20:hammer:=20=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20+=20=E9=94=99=E8=AF=AF=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/Controller/LoginHandler.ts               | 25 +-------
 src/layout/NavBar/index.vue                   |  4 +-
 src/layout/TagsView/index.vue                 |  3 +-
 src/main.ts                                   | 17 ++---
 src/modules/auth.ts                           | 20 +++++-
 src/modules/pinia.ts                          | 14 ----
 src/permission.ts                             | 64 -------------------
 src/plugins/extension/piniaStorage.ts         | 10 ---
 .../auth.ts => store/cookie/loginInfo.ts}     | 16 ++---
 src/util/net.ts                               |  4 +-
 src/util/request.ts                           |  4 +-
 src/util/youngSocket.ts                       |  4 +-
 src/views/base/login.vue                      |  4 +-
 13 files changed, 39 insertions(+), 150 deletions(-)
 delete mode 100644 src/modules/pinia.ts
 delete mode 100644 src/permission.ts
 delete mode 100644 src/plugins/extension/piniaStorage.ts
 rename src/{util/auth.ts => store/cookie/loginInfo.ts} (69%)

diff --git a/mock/Controller/LoginHandler.ts b/mock/Controller/LoginHandler.ts
index bf2a5c7..5f7a572 100644
--- a/mock/Controller/LoginHandler.ts
+++ b/mock/Controller/LoginHandler.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2021-08-26 15:34:41
- * @LastEditTime: 2021-11-28 14:07:49
+ * @LastEditTime: 2022-02-26 16:10:32
  * @Description: 登录相关
  */
 import { MockApi } from "../decorator/MockApi";
@@ -217,29 +217,6 @@ export class LoginController {
               part: []
             }
           ]
-        },
-        {
-          autoid: 4,
-          is_show: 0,
-          node_desc: '测试',
-          node_name: '自动创建测试',
-          node_path: '',
-          node_sort: 0,
-          node_type: 1,
-          parent_id: 0,
-          part: [
-            {
-              autoid: 41,
-              is_show: 1,
-              node_desc: '自动创建测试',
-              node_name: '自动创建测试',
-              node_path: '10000/21',
-              node_sort: 0,
-              node_type: 2,
-              parent_id: 4,
-              part: []
-            }
-          ]
         }
       ]
     });
diff --git a/src/layout/NavBar/index.vue b/src/layout/NavBar/index.vue
index 1faab69..b2ae5ad 100644
--- a/src/layout/NavBar/index.vue
+++ b/src/layout/NavBar/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-10 11:30:30
- * @LastEditTime: 2022-02-24 18:47:49
+ * @LastEditTime: 2022-02-26 15:59:40
  * @Description: 顶部导航栏组件
 -->
 <template>
@@ -87,7 +87,7 @@ import Hamburger from '../components/Hamburger/index.vue';
 import HeadNav from '../components/HeadNav/index.vue';
 import { useUserStore } from '../../store';
 import { storeToRefs } from 'pinia';
-import { removeToken } from '../../util/auth';
+import { removeToken } from '../../store/cookie/loginInfo';
 import { toFullScreen, exitFullscreen } from '../../util/browser';
 import { useToggle } from '../../util/tool';
 const [isFull, toggleFullScreen] = useToggle(toFullScreen, exitFullscreen);
diff --git a/src/layout/TagsView/index.vue b/src/layout/TagsView/index.vue
index 27dcc13..a8d4b29 100644
--- a/src/layout/TagsView/index.vue
+++ b/src/layout/TagsView/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-11 13:35:58
- * @LastEditTime: 2022-02-24 19:08:28
+ * @LastEditTime: 2022-02-26 16:03:49
  * @Description: 标签选项卡组件
 -->
 <template>
@@ -43,7 +43,6 @@ import { useTagsStore, useUserStore } from '../../store';
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
 
 const showContextMenu = ref(false);
-console.log(ScrollPane)
 
 const tagsState = useTagsStore();
 const { visitedViews, cachedViews } = storeToRefs(tagsState);
diff --git a/src/main.ts b/src/main.ts
index 2c31f7f..431e974 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@ import { useUserStore } from './store/useUserStore';
 /*
  * @Author: zhangyang
  * @Date: 2021-02-24 11:28:17
- * @LastEditTime: 2022-02-24 19:04:38
+ * @LastEditTime: 2022-02-26 15:59:18
  * @Description: 项目入口文件
  */
 
@@ -22,9 +22,6 @@ import 'element-plus/dist/index.css';
 // 引入 VueRouter
 import Router, { routes } from './route/index';
 // 引入路由导航守卫
-// import './permission';
-// import { getToken } from './util/auth';
-// import { generateUserInfo } from './util/generateUserInfo';
 
 // 统一浏览器样式
 import 'normalize.css/normalize.css';
@@ -33,22 +30,18 @@ import '@/styles/index.scss';
 
 import { createApp } from 'vue';
 import App from './App.vue';
-import { storeToRefs } from 'pinia';
+import { createPinia, storeToRefs } from 'pinia';
 
 // 引入 console.log 美化
 // import './assets/js/console-butifull';
-// (async () => {
-//   // 刷新页面的时候，如果存在 token 就直接获取导航栏列表
-//   if (getToken().token) {
-//     generateUserInfo();
-//   }
-// })();
 
 // 创建应用实例
 const app = createApp(App);
+// pinia
+const pinia = createPinia();
+app.use(pinia);
 // 使用路由
 app.use(Router);
-
 // 批量安装模块
 Object.values(
   import.meta.globEager('./modules/*.ts')
diff --git a/src/modules/auth.ts b/src/modules/auth.ts
index d817d20..7b9e811 100644
--- a/src/modules/auth.ts
+++ b/src/modules/auth.ts
@@ -1,16 +1,19 @@
 /*
  * @Author: zhangyang
  * @Date: 2022-02-24 19:21:36
- * @LastEditTime: 2022-02-24 19:30:19
+ * @LastEditTime: 2022-02-26 15:58:52
  * @Description: 权限控制
  */
 import type { YoungModule } from '../types';
 import router from '../route';
 import commonRoutes from '../route/common/index';
 
-import { getToken } from '../util/auth';
+import { getToken } from '../store/cookie/loginInfo';
 import type { RouteLocationNormalized } from 'vue-router';
+
 import { storeToRefs } from 'pinia';
+import { useUserStore } from './../store/useUserStore';
+
 const getCommonRoutes = () => {
   const routesArr: string[] = [];
   for (const route of commonRoutes) {
@@ -25,7 +28,7 @@ const getCommonRoutes = () => {
   return routesArr;
 };
 
-const hasPermission = async (route: RouteLocationNormalized | string) => {
+export const hasPermission = async (route: RouteLocationNormalized | string) => {
   const { useUserStore } = await import('../store');
   const { RoleRoute } = storeToRefs(useUserStore());
 
@@ -36,6 +39,15 @@ const hasPermission = async (route: RouteLocationNormalized | string) => {
   return roleRoute.includes(route.path) || roleRoute.includes(route.fullPath);
 };
 
+const checkNavData = async () => {
+  const { generateUserInfo } = await import('../util/generateUserInfo');
+  const { NavArr } = storeToRefs(useUserStore());
+
+  if (NavArr.value.length === 0) {
+    await generateUserInfo();
+  }
+}
+
 export const install: YoungModule = (app) => {
   router.beforeEach(async (to, from, next) => {
     document.title = (to.meta.title as string) || '小黑后台';
@@ -59,6 +71,8 @@ export const install: YoungModule = (app) => {
       ElMessage.error('暂时无权访问该页面，请勿进行恶意操作');
       next(from.path);
     } else {
+      // 如果没有节点数据则重新生成
+      await checkNavData();
       next();
     }
   });
diff --git a/src/modules/pinia.ts b/src/modules/pinia.ts
deleted file mode 100644
index c7e49f1..0000000
--- a/src/modules/pinia.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * @Author: zhangyang
- * @Date: 2022-02-24 15:00:52
- * @LastEditTime: 2022-02-24 19:45:29
- * @Description: pinia
- */
-import { createPinia } from 'pinia';
-import type { YoungModule } from '../types';
-import { piniaStorage } from '../plugins/extension/piniaStorage';
-export const install: YoungModule = (app) => {
-  const pinia = createPinia();
-  pinia.use(piniaStorage);
-  app.use(pinia);
-};
diff --git a/src/permission.ts b/src/permission.ts
deleted file mode 100644
index 6989c9b..0000000
--- a/src/permission.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * @Author: zhangyang
- * @Date: 2020-12-09 17:21:19
- * @LastEditTime: 2022-02-25 16:00:00
- * @Description: 页面权限控制
- */
-import router from './route/index';
-import commonRoutes from './route/common/index';
-
-import { getToken } from './util/auth';
-import { useUserStore } from './store';
-import type { RouteLocationNormalized } from 'vue-router';
-import { storeToRefs } from 'pinia';
-const { RoleRoute } = storeToRefs(useUserStore());
-const getCommonRoutes = () => {
-  const routesArr: string[] = [];
-  for (const route of commonRoutes) {
-    if (route.children?.length) {
-      for (const sub of route.children) {
-        routesArr.push(sub.path);
-      }
-    } else {
-      routesArr.push(route.path);
-    }
-  }
-  return routesArr;
-};
-
-const hasPermission = (route: RouteLocationNormalized | string) => {
-  const roleRoute = RoleRoute.value.concat(getCommonRoutes());
-  if (typeof route === 'string') {
-    return roleRoute.includes(route);
-  }
-  return roleRoute.includes(route.path) || roleRoute.includes(route.fullPath);
-};
-
-/**
- * 前置导航守卫
- */
-router.beforeEach(async (to, from, next) => {
-  document.title = (to.meta.title as string) || '小黑后台';
-
-  // 此处添加鉴权
-  if (!getToken().token && to.name !== 'login') {
-    await ElMessageBox.confirm('未登录或登录信息过期，请先去登录', '提示', {
-      type: 'error',
-      showCancelButton: false,
-      closeOnClickModal: false,
-    }).catch(() => null);
-    next({
-      name: 'login',
-      query: {
-        redirect: to.path
-      }
-    });
-
-  } else if (!hasPermission(to)) {
-    // 具体页面权限 map 判断
-    ElMessage.error('暂时无权访问该页面，请勿进行恶意操作');
-    next(from.path);
-  } else {
-    next();
-  }
-});
diff --git a/src/plugins/extension/piniaStorage.ts b/src/plugins/extension/piniaStorage.ts
deleted file mode 100644
index 717fda2..0000000
--- a/src/plugins/extension/piniaStorage.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * @Author: zhangyang
- * @Date: 2022-02-24 19:42:12
- * @LastEditTime: 2022-02-24 19:46:19
- * @Description: pinia 存储固化
- */
-import type { PiniaPlugin } from 'pinia';
-export const piniaStorage: PiniaPlugin = ({ pinia, store }) => {
-  console.log(pinia.state.value);
-}
diff --git a/src/util/auth.ts b/src/store/cookie/loginInfo.ts
similarity index 69%
rename from src/util/auth.ts
rename to src/store/cookie/loginInfo.ts
index 8719142..7236f21 100644
--- a/src/util/auth.ts
+++ b/src/store/cookie/loginInfo.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2020-12-08 11:15:26
- * @LastEditTime: 2021-07-30 15:13:48
+ * @LastEditTime: 2022-02-26 15:57:52
  * @Description: 用户身份认证 Cookie
  */
 import Cookies from 'js-cookie';
@@ -11,27 +11,21 @@ const TONKEN_KEY = 'www.bluesyoung-web.top';
 /**
  * 获取 Token
  */
-const getToken = () => {
+export const getToken = () => {
   const token = Cookies.get(TONKEN_KEY) || '{}';
-  return JSON.parse(token);
+  return JSON.parse(token) as UserKey;
 };
 
 /**
  * 设置 Token
  * @param key 后端返回的用户信息
  */
-const setToken = (key: UserKey) => {
+export const setToken = (key: UserKey) => {
   return Cookies.set(TONKEN_KEY, JSON.stringify(key));
 };
 /**
  * 删除 Token，退出登录
  */
-const removeToken = () => {
+export const removeToken = () => {
   return Cookies.remove(TONKEN_KEY);
 };
-
-export {
-  getToken,
-  setToken,
-  removeToken
-}
diff --git a/src/util/net.ts b/src/util/net.ts
index 6633620..b23c891 100644
--- a/src/util/net.ts
+++ b/src/util/net.ts
@@ -1,12 +1,12 @@
 /*
  * @Author: zhangyang
  * @Date: 2020-12-08 11:26:10
- * @LastEditTime: 2022-01-23 14:31:41
+ * @LastEditTime: 2022-02-26 16:00:37
  * @Description: HTTP 网络请求模块
  */
 import axios from 'axios';
 import { ElLoadingService } from 'element-plus';
-import { removeToken } from './auth';
+import { removeToken } from '../store/cookie/loginInfo';
 import { USE_REAL_SERVER } from '../store';
 
 /**
diff --git a/src/util/request.ts b/src/util/request.ts
index 9706325..c4e1fe4 100644
--- a/src/util/request.ts
+++ b/src/util/request.ts
@@ -1,11 +1,11 @@
 /*
  * @Author: zhangyang
  * @Date: 2020-12-09 16:02:36
- * @LastEditTime: 2021-09-07 17:02:23
+ * @LastEditTime: 2022-02-26 16:00:52
  * @Description: 封装不同的请求方法
  */
 import net from './net';
-import { getToken } from './auth';
+import { getToken } from '../store/cookie/loginInfo';
 import type { Method } from 'axios';
 
 type ParamsObj = Record<string, any>;
diff --git a/src/util/youngSocket.ts b/src/util/youngSocket.ts
index daf4bb2..a7c2ea9 100644
--- a/src/util/youngSocket.ts
+++ b/src/util/youngSocket.ts
@@ -1,11 +1,11 @@
 /*
  * @Author: zhangyang
  * @Date: 2021-07-16 17:17:33
- * @LastEditTime: 2021-10-16 17:04:06
+ * @LastEditTime: 2022-02-26 16:01:11
  * @Description: 封装 WebSocket 相关的操作
  */
 import { useWebSocket } from '@vueuse/core';
-import { getToken } from './auth';
+import { getToken } from '../store/cookie/loginInfo';
 import md5 from 'md5';
 import { USE_REAL_SERVER } from '../store';
 
diff --git a/src/views/base/login.vue b/src/views/base/login.vue
index 9df6fe4..7c98c55 100644
--- a/src/views/base/login.vue
+++ b/src/views/base/login.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2020-12-03 14:25:49
- * @LastEditTime: 2022-02-24 18:51:04
+ * @LastEditTime: 2022-02-26 15:59:03
  * @Description: 登录
 -->
 <template>
@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 import type { FormRulesMap } from 'element-plus/es/components/form/src/form.type';
 import { login } from '../../api/user';
-import { setToken } from '../../util/auth';
+import { setToken } from '../../store/cookie/loginInfo';
 import { generateUserInfo } from '../../util/generateUserInfo';
 import { SYSTEM_OPEN_KEYS, USE_REAL_SERVER, useUserStore } from '../../store';
 import { storeToRefs } from 'pinia';
-- 
Gitee


From 6ea706f4cc56145385a756900e2c2470927ab9b0 Mon Sep 17 00:00:00 2001
From: BluesYoung-web <15171255945@163.com>
Date: Sat, 26 Feb 2022 16:23:13 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8D=E9=89=B4?=
 =?UTF-8?q?=E6=9D=83=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/auth.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/modules/auth.ts b/src/modules/auth.ts
index 7b9e811..8c2d67c 100644
--- a/src/modules/auth.ts
+++ b/src/modules/auth.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2022-02-24 19:21:36
- * @LastEditTime: 2022-02-26 15:58:52
+ * @LastEditTime: 2022-02-26 16:21:13
  * @Description: 权限控制
  */
 import type { YoungModule } from '../types';
@@ -28,8 +28,7 @@ const getCommonRoutes = () => {
   return routesArr;
 };
 
-export const hasPermission = async (route: RouteLocationNormalized | string) => {
-  const { useUserStore } = await import('../store');
+export const hasPermission = (route: RouteLocationNormalized | string) => {
   const { RoleRoute } = storeToRefs(useUserStore());
 
   const roleRoute = RoleRoute.value.concat(getCommonRoutes());
-- 
Gitee