feat: infoCard, state system refactor

src/App.vue

@@ -6,9 +6,14 @@
 export default {
   mounted() {
     const that = this;
-    that.$store.commit("recover_user");
+    if (sessionStorage.token) {
+      that.$store.commit("storage_load_user");
+      that.$store.commit("storage_delete_user");
+    }
     window.onbeforeunload = function () {
-      that.$store.commit("save_user");
+      if (that.$store.state.user.token) {
+        that.$store.commit("storage_save_user");
+      }
       return null;
     };
   },

src/router/index.js

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
-import AuthPage from "@/views/AuthPage/AuthPage";
 import store from "@/store";
 import { ElMessage } from "element-plus";
+import PortalPage from "@/views/PortalPage/PortalPage";
 
 
 const routes = [
@@ -12,13 +12,13 @@ const routes = [
   {
     path: "/portal",
     name: "Portal",
-    component: () => import("../views/PortalPage/PortalPage.vue"),
+    // 落地页同步加载
+    component: PortalPage,
   },
   {
     path: "/auth",
     name: "Auth",
-    // 落地页同步加载
-    component: AuthPage,
+    component: () => import("../views/AuthPage/AuthPage.vue"),
   },
   {
     path: "/task",
@@ -64,7 +64,9 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  if ((to.name !== "Auth" || to.name !== "Portal") && !store.state.user.token) {
+  if (to.name === "Portal" || to.name === "Auth") {
+    next();
+  } else if (!store.state.user.token) {
     ElMessage({
       showClose: true,
       message: "请先登录",

src/store/modules/user.js

@@ -16,7 +16,7 @@ const user = {
   },
 
   mutations: {
-    reset_user: function (state) {
+    state_reset_user: function (state) {
       state.token = undefined;
       state.name = undefined;
       state.id = undefined;
@@ -28,19 +28,8 @@ const user = {
       state.signature = undefined;
       state.createdTime = undefined;
       state.valid = undefined;
-      localStorage.removeItem("token");
-      localStorage.removeItem("name");
-      localStorage.removeItem("id");
-      localStorage.removeItem("phone");
-      localStorage.removeItem("username");
-      localStorage.removeItem("email");
-      localStorage.removeItem("photo");
-      localStorage.removeItem("role");
-      localStorage.removeItem("signature");
-      localStorage.removeItem("createdTime");
-      localStorage.removeItem("valid");
     },
-    set_user: function (state, data) {
+    state_set_user: function (state, data) {
       state.token = data.token;
       state.name = data.name;
       state.id = data.user.id;
@@ -53,31 +42,41 @@ const user = {
       state.createdTime = data.user.createdTime;
       state.valid = data.user.valid;
     },
-    save_user: function (state) {
-      sessionStorage._token = state.token;
-      localStorage._name = state.name;
-      localStorage._id = state.id;
-      localStorage._phone = state.phone;
-      localStorage._username = state.username;
-      localStorage._email = state.email;
-      localStorage._photo = state.photo;
-      localStorage._role = state.role;
-      localStorage._signature = state.signature;
-      localStorage._createdTime = state.createdTime;
-      localStorage._valid = state.valid;
+    storage_save_user: function (state) {
+      sessionStorage.token = state.token;
+      sessionStorage.name = state.name;
+      sessionStorage.id = state.id;
+      sessionStorage.username = state.username;
+      sessionStorage.email = state.email;
+      sessionStorage.photo = state.photo;
+      sessionStorage.role = state.role;
+      sessionStorage.signature = state.signature;
+      sessionStorage.createdTime = state.createdTime;
+      sessionStorage.valid = state.valid;
     },
-    recover_user: function (state) {
-      state.token = sessionStorage._token;
-      state.name = localStorage._name;
-      state.id = localStorage._id;
-      state.phone = localStorage._phone;
-      state.username = localStorage._username;
-      state.email = localStorage._email;
-      state.photo = localStorage._photo;
-      state.role = localStorage._role;
-      state.signature = localStorage._signature;
-      state.createdTime = localStorage._createdTime;
-      state.valid = localStorage._valid;
+    storage_load_user: function (state) {
+      state.token = sessionStorage.token;
+      state.name = sessionStorage.name;
+      state.id = sessionStorage.id;
+      state.username = sessionStorage.username;
+      state.email = sessionStorage.email;
+      state.photo = sessionStorage.photo;
+      state.role = sessionStorage.role;
+      state.signature = sessionStorage.signature;
+      state.createdTime = sessionStorage.createdTime;
+      state.valid = sessionStorage.valid;
+    },
+    storage_delete_user: function () {
+      sessionStorage.removeItem("token");
+      sessionStorage.removeItem("name");
+      sessionStorage.removeItem("id");
+      sessionStorage.removeItem("username");
+      sessionStorage.removeItem("email");
+      sessionStorage.removeItem("photo");
+      sessionStorage.removeItem("role");
+      sessionStorage.removeItem("signature");
+      sessionStorage.removeItem("createdTime");
+      sessionStorage.removeItem("valid");
     }
   },
 

src/views/AuthPage/components/AuthCard.vue

@@ -87,7 +87,7 @@
       </div>
 
       <div v-if="cardType==='login'" id="auth-card-login-password-options">
-        <el-checkbox v-model="rememberPassword">记住我</el-checkbox>
+        <el-checkbox v-model="rememberMe">记住我</el-checkbox>
         <span id="auth-card-login-password-option-reset" @click="toResetType">重置密码</span>
       </div>
 
@@ -150,7 +150,7 @@ export default {
       cardButtonDisabled: false,
       cardButtonText: "获取验证码",
       cardVerified: true,
-      rememberPassword: false,
+      rememberMe: false,
       cardForm: {
         phone: "",
         name: "",
@@ -259,14 +259,10 @@ export default {
   },
 
   mounted() {
-    if (localStorage.phone) {
+    if (localStorage.rememberMe) {
       this.cardForm.phone = localStorage.phone;
-    }
-    if (localStorage.password) {
       this.cardForm.password = localStorage.password;
-    }
-    if (localStorage.rememberPassword) {
-      this.rememberPassword = true;
+      this.rememberMe = true;
     }
   },
 
@@ -311,16 +307,16 @@ export default {
               this.$apis.loginAPI(params)
                 .then((res) => {
                   if (res.data.code === 0) {
-                    if (this.rememberPassword) {
+                    if (this.rememberMe) {
                       localStorage.phone = this.cardForm.phone;
                       localStorage.password = this.cardForm.password;
-                      localStorage.rememberPassword = this.rememberPassword;
+                      localStorage.rememberMe = this.rememberMe;
                     } else {
+                      localStorage.removeItem("rememberMe");
+                      localStorage.removeItem("phone");
                       localStorage.removeItem("password");
-                      localStorage.removeItem("rememberPassword");
                     }
-                    this.$store.commit("set_user", res.data.data);
-                    this.$store.commit("save_user");
+                    this.$store.commit("state_set_user", res.data.data);
                     this.$message({
                       showClose: true,
                       message: "登录成功",

src/views/PortalPage/components/InfoCard.vue

@@ -48,9 +48,9 @@ export default {
       this.$router.push("/auth");
     },
     logout() {
-      this.$store.commit("reset_user");
-      this.$store.commit("save_user");
-      this.$router.replace("/");
+      this.$store.commit("state_reset_user");
+      this.$store.commit("storage_delete_user");
+      location.reload();
     },
   },
 
@@ -65,7 +65,7 @@ export default {
 
 <style scoped>
 #info-card-body {
-  height: 100%;
+  height: calc(100% - 10px);
   width: 200px;
   margin: 10px auto 0 auto;
   display: flex;