feat: pinia持久化

.husky/_/.gitignore

@@ -0,0 +1 @@
+*

.husky/_/commit-msg

@@ -1,4 +1,2 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/husky.sh"
+. "${0%/*}/h"
-
-npx --no-install commitlint --edit $1

.husky/_/pre-commit

@@ -1,5 +1,2 @@
-#!/bin/sh
+#!/usr/bin/env sh
-
+. "${0%/*}/h"
-. "$(dirname "$0")/husky.sh"
-
-npm run lint-staged

package.json

@@ -25,6 +25,7 @@
     "dc-admin": "link:",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persist": "^1.0.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

src/auto-import.d.ts

@@ -5,79 +5,67 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: (typeof import("vue"))["EffectScope"];
+  const EffectScope: typeof import('vue')['EffectScope']
-  const computed: (typeof import("vue"))["computed"];
+  const computed: typeof import('vue')['computed']
-  const createApp: (typeof import("vue"))["createApp"];
+  const createApp: typeof import('vue')['createApp']
-  const customRef: (typeof import("vue"))["customRef"];
+  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: (typeof import("vue"))["defineComponent"];
+  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: (typeof import("vue"))["effectScope"];
+  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: (typeof import("vue"))["h"];
+  const h: typeof import('vue')['h']
-  const inject: (typeof import("vue"))["inject"];
+  const inject: typeof import('vue')['inject']
-  const isProxy: (typeof import("vue"))["isProxy"];
+  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: (typeof import("vue"))["isReactive"];
+  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: (typeof import("vue"))["isReadonly"];
+  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: (typeof import("vue"))["isRef"];
+  const isRef: typeof import('vue')['isRef']
-  const markRaw: (typeof import("vue"))["markRaw"];
+  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: (typeof import("vue"))["nextTick"];
+  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: (typeof import("vue"))["onActivated"];
+  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
-  const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: (typeof import("vue"))["onDeactivated"];
+  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: (typeof import("vue"))["onMounted"];
+  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: (typeof import("vue"))["onUnmounted"];
+  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: (typeof import("vue"))["onUpdated"];
+  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: (typeof import("vue"))["provide"];
+  const provide: typeof import('vue')['provide']
-  const reactive: (typeof import("vue"))["reactive"];
+  const reactive: typeof import('vue')['reactive']
-  const readonly: (typeof import("vue"))["readonly"];
+  const readonly: typeof import('vue')['readonly']
-  const ref: (typeof import("vue"))["ref"];
+  const ref: typeof import('vue')['ref']
-  const resolveComponent: (typeof import("vue"))["resolveComponent"];
+  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: (typeof import("vue"))["shallowReactive"];
+  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: (typeof import("vue"))["shallowRef"];
+  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: (typeof import("vue"))["toRaw"];
+  const toRaw: typeof import('vue')['toRaw']
-  const toRef: (typeof import("vue"))["toRef"];
+  const toRef: typeof import('vue')['toRef']
-  const toRefs: (typeof import("vue"))["toRefs"];
+  const toRefs: typeof import('vue')['toRefs']
-  const toValue: (typeof import("vue"))["toValue"];
+  const toValue: typeof import('vue')['toValue']
-  const triggerRef: (typeof import("vue"))["triggerRef"];
+  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: (typeof import("vue"))["unref"];
+  const unref: typeof import('vue')['unref']
-  const useAttrs: (typeof import("vue"))["useAttrs"];
+  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: (typeof import("vue"))["useCssModule"];
+  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: (typeof import("vue"))["useCssVars"];
+  const useCssVars: typeof import('vue')['useCssVars']
-  const useLink: (typeof import("vue-router"))["useLink"];
+  const useLink: typeof import('vue-router')['useLink']
-  const useRoute: (typeof import("vue-router"))["useRoute"];
+  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: (typeof import("vue-router"))["useRouter"];
+  const useRouter: typeof import('vue-router')['useRouter']
-  const useSlots: (typeof import("vue"))["useSlots"];
+  const useSlots: typeof import('vue')['useSlots']
-  const watch: (typeof import("vue"))["watch"];
+  const watch: typeof import('vue')['watch']
-  const watchEffect: (typeof import("vue"))["watchEffect"];
+  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
-    Component,
+  import('vue')
-    ComponentPublicInstance,
-    ComputedRef,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    VNode,
-    WritableComputedRef
-  } from "vue";
-  import("vue");
 }

src/components.d.ts

@@ -5,11 +5,11 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module "vue" {
+declare module 'vue' {
   export interface GlobalComponents {
-    RouterLink: (typeof import("vue-router"))["RouterLink"];
+    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: (typeof import("vue-router"))["RouterView"];
+    RouterView: typeof import('vue-router')['RouterView']
-    SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
+    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
-    VerifyCode: (typeof import("./components/VerifyCode/index.vue"))["default"];
+    VerifyCode: typeof import('./components/VerifyCode/index.vue')['default']
   }
 }

src/layout/components/Header/index.vue

@@ -116,6 +116,8 @@ import Notice from "@/layout/components/Header/components/Notice/index.vue";
 import myImage from "@/assets/img/my-image.jpg";
 import { Modal } from "@arco-design/web-vue";
 import { useRouter } from "vue-router";
+import pinia from "@/store/index";
+import { useUserInfoStore } from "@/store/user-info";
 const router = useRouter();
 
 const logOut = () => {
@@ -124,9 +126,10 @@ const logOut = () => {
     content: "确定退出登录？",
     hideCancel: false,
     closable: true,
-    onBeforeOk: () => {
+    onBeforeOk: async () => {
       try {
-        sessionStorage.removeItem("token");
+        const store = useUserInfoStore(pinia);
+        await store.logOut();
         router.replace("/login");
         return true;
       } catch {

src/main.ts

@@ -4,9 +4,11 @@ import App from "@/App.vue";
 import ArcoVue from "@arco-design/web-vue";
 import router from "@/router/index";
 import pinia from "@/store/index";
+import piniaPluginPersist from "pinia-plugin-persist";
 import "virtual:svg-icons-register";
 import "@arco-design/web-vue/dist/arco.css";
 
+pinia.use(piniaPluginPersist);
 const app = createApp(App);
 app.use(ArcoVue, {
   // 用于改变使用组件时的前缀名称

src/router/index.ts

@@ -2,6 +2,9 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import { dynamicRoutes, staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
 import { initSetRouter } from "@/router/route-output";
 import NProgress from "@/config/nprogress";
+import pinia from "@/store/index";
+import { storeToRefs } from "pinia";
+import { useUserInfoStore } from "@/store/user-info";
 
 /**
  * 创建vue的路由示例
@@ -22,12 +25,14 @@ export const router = createRouter({
 // 路由加载前
 router.beforeEach(async (to, from, next) => {
   NProgress.start(); // 开启进度条
+  const store = useUserInfoStore(pinia);
+  const { token } = storeToRefs(store);
   console.log(to, from);
-  if (to.path === "/login" && !sessionStorage.getItem("token")) {
+  if (to.path === "/login" && !token.value) {
     next();
-  } else if (!sessionStorage.getItem("token")) {
+  } else if (!token.value) {
     next("/login");
-  } else if (to.path === "/login" && sessionStorage.getItem("token")) {
+  } else if (to.path === "/login" && token.value) {
     next("/home");
   } else {
     initSetRouter();

src/router/route-output.ts

@@ -1,6 +1,10 @@
 import { dynamicRoutes } from "@/router/route";
+import pinia from "@/store/index";
+import { storeToRefs } from "pinia";
+import { useUserInfoStore } from "@/store/user-info";
+// import { useRoutesListStore } from "@/store/route-list";
+
 export function initSetRouter() {
-  console.log("路由数据处理");
   // 过滤后的结果
   let filteredData = filterByRole(dynamicRoutes[0].children);
   console.log("路由处理完", filteredData);
@@ -19,6 +23,7 @@ export const filterByRole = (nodes: any) => {
 
 // 校验角色权限
 export const roleBase = (roles: Array<string>) => {
-  let userRoles = ["admin"];
+  const store = useUserInfoStore(pinia);
-  return userRoles.some(el => roles.includes(el));
+  const { account } = storeToRefs(store);
+  return account.value.roles.some((item: string) => roles.includes(item));
 };

src/store/user-info.ts

@@ -0,0 +1,32 @@
+import { defineStore } from "pinia";
+
+/**
+ * 用户信息
+ * @methods setAccount 设置账号信息
+ * @methods setToken 设置token
+ * @methods logOut 退出登录
+ */
+export const useUserInfoStore = defineStore("routeList", {
+  state: (): any => ({
+    account: {
+      username: "",
+      roles: []
+    }, // 账号信息
+    token: "" // token
+  }),
+  actions: {
+    async setAccount(data: Array<string>) {
+      this.account = data;
+    },
+    async setToken(data: string) {
+      this.token = data;
+    },
+    async logOut() {
+      this.account = {};
+      this.token = "";
+    }
+  },
+  persist: {
+    enabled: true // 开启数据缓存-默认缓存全部数据
+  }
+});

src/views/login/login.vue

@@ -49,6 +49,8 @@
 <script setup lang="ts">
 import { Message } from "@arco-design/web-vue";
 import { useRouter } from "vue-router";
+import pinia from "@/store/index";
+import { useUserInfoStore } from "@/store/user-info";
 const router = useRouter();
 const form = ref({
   username: "admin",
@@ -112,7 +114,14 @@ const verifyCodeChange = (code: string) => (verify.value.verifyCode = code);
 
 const onSubmit = ({ errors }: any) => {
   if (errors) return;
-  sessionStorage.setItem("token", "DC-Admin");
+  // 存储用户信息
+  let stores = useUserInfoStore(pinia);
+  let account = {
+    username: form.value.username,
+    roles: ["admin"]
+  };
+  stores.setAccount(account);
+  stores.setToken("DC-Admin");
   Message.success("登录成功");
   router.push("/home");
 };

src/vite-env.d.ts

@@ -4,3 +4,5 @@ declare module "*.vue" {
   const component: ReturnType<typeof defineComponent>;
   export default component;
 }
+
+declare module "pinia-plugin-persist";