9-9 整合 vuex 和 SessionStorage，解决刷新后登录数据丢失问题

9796ff29 · yubinCloud · 18e4751c · 9796ff29 · 9796ff29 · 9796ff29
4 changed file
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <script src="<%= BASE_URL %>js/md5.js"></script>
+      <script src="<%= BASE_URL %>js/session-storage.js"></script>
      <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>

--- a/web/public/js/session-storage.js
+++ b/web/public/js/session-storage.js
+SessionStorage = {
+    get: function (key) {
+        const v = sessionStorage.getItem(key);
+        if (v && typeof(v) !== "undefined" && v !== "undefined") {
+            return JSON.parse(v);
+        }
+    },
+    set: function (key, data) {
+        sessionStorage.setItem(key, JSON.stringify(data));
+    },
+    remove: function (key) {
+        sessionStorage.removeItem(key);
+    },
+    clearAll: function () {
+        sessionStorage.clear();
+    }
+};
--- a/web/src/components/the-header.vue
+++ b/web/src/components/the-header.vue
@@ -21,12 +21,12 @@
      <a-menu-item key="/about">
        <router-link to="/about">关于我们</router-link>
      </a-menu-item>
-      <a class="login-menu" v-show="currUser.id">
+      <a class="login-menu" v-show="currUser.name">
        <span>Welcome, {{currUser.name}}</span>
      </a>
-      <a class="login-menu" v-show="!currUser.id" @click="showLoginModal">
+      <a class="login-menu" v-show="!currUser.name" @click="showLoginModal">
        <span>登录</span>
-      </a>
+      </a>S
    </a-menu>

    <a-modal
@@ -48,7 +48,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import {computed, defineComponent, ref} from "vue";
 import axios from 'axios';
 import { message } from 'ant-design-vue';
 import store from "@/store";
@@ -60,8 +60,7 @@ export default defineComponent({
  name: 'the-header',
  setup () {
    // 登录后保存
-    const currUser = ref();
-    currUser.value = {};
+    const currUser = computed(() => store.state.localUser);

    // 用来登录
    const loginUser = ref({
@@ -84,8 +83,7 @@ export default defineComponent({
        const respData = response.data;
        if (respData.code === 0) {
          loginModalVisible.value = false;
-          currUser.value = respData.data;
-          store.commit("setLocalUser", currUser.value);
+          store.commit("setLocalUser", respData.data);
          message.success("登录成功！");
        } else {
          message.error(respData.msg);

--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
 import { createStore } from 'vuex'

+declare let SessionStorage: any;
+const USER = 'USER';
+
 const store = createStore({
  state: {
-    localUser: {
-      name: ''
-    }  // 表示当前登录的用户及其信息
+    localUser: SessionStorage.get(USER) || {}  // 表示当前登录的用户
  },
  mutations: {
    setLocalUser(state, user) {
      state.localUser = user;
+      SessionStorage.set(USER, user);  // 将该用户的信息存放于 SessionStorage 中
    }
  },
  actions: {