1.登陆token状态管理

package.json

@@ -15,6 +15,8 @@
     "crypto-js": "^4.1.1",
     "cryptojs": "^2.5.3",
     "element-plus": "^2.2.21",
+    "pinia": "^2.0.28",
+    "pinia-plugin-persist": "^1.0.0",
     "unplugin-icons": "^0.14.13",
     "vue": "^3.2.41",
     "vue-router": "4"

src/components/auth/login.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import { type } from 'os'
 import { reactive, ref } from 'vue'
+import service from '../../plugins/axios'
+import { token, userdata } from '../../plugins/pinia'
+import { encrypt } from '../../plugins/crypto'
 const form = reactive({
   name: '',
   paw: '',
@@ -16,12 +20,18 @@ const rules = reactive({
 })
 const formRef = ref()
 const bt_login = async (formEl: any) => {
-  formEl.validate((valid: boolean, e: any) => {
+  formEl.validate(async (valid: boolean, e: any) => {
     if (valid) {
-      console.log(form)
-    } else {
-      console.log('error submit!!')
-      return false
+      const userinfo = (await service.post('/auth/login', form)) as userdata
+      type userdata = {
+        id: number
+        name: string
+        email: string
+        createdAt: string
+        token: string
+      }
+      token().token = userinfo.token
+      userdata().data = encrypt(userinfo)
     }
   })
 }
@@ -62,7 +72,6 @@ const bt_login = async (formEl: any) => {
     </el-form-item>
   </el-form>
   <el-divider />
-  <!-- 快捷登录 -->
   <div>
     <el-button type="primary"
                style="width:98%;"

src/components/auth/register.vue

@@ -2,6 +2,7 @@
 import { FormInstance, FormRules, ElMessage } from 'element-plus'
 import service from '../../plugins/axios'
 import { reactive, ref } from 'vue'
+import { token } from '../../plugins/pinia'
 
 let ressuccess = ''
 const codvisible = ref(false)
@@ -71,9 +72,10 @@ const bt_resgister = async (formEl: FormInstance | undefined) => {
         },
       })
         .then((res) => {
-          console.log(res)
-          localStorage.setItem('token', res.data.token)
-          ElMessage.success('注册成功')
+          if (res.data.token) {
+            token().token = res.data.token
+            ElMessage.success('注册成功')
+          }
         })
         .catch((err) => {
           ElMessage.error(err.message)

src/main.ts

@@ -4,9 +4,11 @@ import "element-plus/es/components/message/style/css";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import "element-plus/theme-chalk/display.css";
 import router, { setupRouter } from "./plugins/router";
+import { pinia } from "./plugins/pinia";
 function bootstrap() {
   const app = createApp(App);
   setupRouter(app);
+  app.use(pinia);
   app.mount("#app");
 }
 bootstrap();

src/plugins/axios.ts

@@ -18,6 +18,9 @@ service.interceptors.response.use(
   (error) => {
     const { status, data } = error.response;
     switch (status) {
+      case 400:
+        ElMessage.error(data.message);
+        break;
       case 401:
         ElMessage.error("token失效，请重新登录");
         router.push("/auth");

src/plugins/pinia.ts

@@ -0,0 +1,36 @@
+import { createPinia, defineStore } from "pinia";
+import piniaPluginPersist from "pinia-plugin-persist";
+export const pinia = createPinia();
+pinia.use(piniaPluginPersist);
+export const token = defineStore({
+  id: "token",
+  state: () => {
+    return {
+      token: "",
+    };
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        storage: localStorage,
+      },
+    ],
+  },
+});
+export const userdata = defineStore({
+  id: "userdata",
+  state: () => {
+    return {
+      data: "",
+    };
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        storage: localStorage,
+      },
+    ],
+  },
+});

yarn.lock

@@ -929,6 +929,21 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://mirrors.cloud.tencent.com/npm/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pinia-plugin-persist@^1.0.0:
+  version "1.0.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz#fc696f225527f30bd5955109fafadd43c725e888"
+  integrity sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==
+  dependencies:
+    vue-demi "^0.12.1"
+
+pinia@^2.0.28:
+  version "2.0.28"
+  resolved "https://mirrors.cloud.tencent.com/npm/pinia/-/pinia-2.0.28.tgz#887c982d854972042d9bdfd5bc4fad3b9d6ab02a"
+  integrity sha512-YClq9DkqCblq9rlyUual7ezMu/iICWdBtfJrDt4oWU9Zxpijyz7xB2xTwx57DaBQ96UGvvTMORzALr+iO5PVMw==
+  dependencies:
+    "@vue/devtools-api" "^6.4.5"
+    vue-demi "*"
+
 pkg-types@^0.3.5:
   version "0.3.6"
   resolved "https://mirrors.cloud.tencent.com/npm/pkg-types/-/pkg-types-0.3.6.tgz"
@@ -1148,6 +1163,11 @@ vue-demi@*:
   resolved "https://mirrors.cloud.tencent.com/npm/vue-demi/-/vue-demi-0.13.11.tgz"
   integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
+vue-demi@^0.12.1:
+  version "0.12.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
+  integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
+
 vue-router@4:
   version "4.1.6"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz"