换用Vuex存储用户信息

package-lock.json

@@ -16,7 +16,8 @@
         "moment": "^2.29.1",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0-0",
-        "vuex": "^4.0.2"
+        "vuex": "^4.0.2",
+        "vuex-persistedstate": "^4.1.0"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -12284,6 +12285,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==",
+      "deprecated": "older versions vulnerable to prototype pollution"
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/side-channel/download/side-channel-1.0.4.tgz",
@@ -14593,6 +14600,27 @@
         "vue": "^3.0.2"
       }
     },
+    "node_modules/vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "peerDependencies": {
+        "vuex": "^3.0 || ^4.0.0-rc"
+      }
+    },
+    "node_modules/vuex-persistedstate/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/download/watchpack-1.7.5.tgz",
@@ -25606,6 +25634,11 @@
       "integrity": "sha1-qkDtrBcERbmkMeF7tiwLiBucQSM=",
       "dev": true
     },
+    "shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw=="
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/side-channel/download/side-channel-1.0.4.tgz",
@@ -27523,6 +27556,22 @@
         "@vue/devtools-api": "^6.0.0-beta.11"
       }
     },
+    "vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/download/watchpack-1.7.5.tgz",

package.json

@@ -15,7 +15,8 @@
     "moment": "^2.29.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
@@ -9,4 +10,4 @@ const app = createApp(App)
 import SvgIcon from '@/components/svgIcon.vue'
 app.component('svg-icon', SvgIcon)
 
-app.use(ElementPlus, {locale: zhCn,}).use(router).mount('#app')
+app.use(ElementPlus, {locale: zhCn,}).use(router).use(store).mount('#app')

src/router/index.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import store from '@/store'
 import Home from '@/views/Home.vue'
 import {createWebHistory} from "vue-router/dist/vue-router.esm-browser"
 import Login from "@/views/Login.vue"
@@ -36,7 +37,7 @@ const router = createRouter({
 router.beforeEach(async (to, from) => {
   if (
       // 检查用户是否已登录
-      !localStorage.getItem('token') &&
+      store.state.staff===null &&
       // ❗️ 避免无限重定向
       to.name !== 'Login'
   ) {

src/store/index.js

@@ -1,19 +1,20 @@
 import { createStore } from 'vuex'
-
+import createPersistedState from "vuex-persistedstate"
 const store = createStore({
   state () {
     return {
-      token: ''
+      staff: null
     }
   },
   mutations: {
-    setToken(state,value) {
-      state.token = value
+    setStaff(state, staff) {
+      state.staff = staff
     },
-    clearToken(state) {
-      state.token = ''
+    clearStaff(state) {
+      state.staff = null
     },
-  }
+  },
+  plugins: [createPersistedState()]
 })
 
 

src/utils/request.js

@@ -1,4 +1,5 @@
 import router from '@/router'
+import store from '@/store'
 import baseUrl from "@/utils/baseUrl"
 const axios = require('axios').default
 
@@ -9,8 +10,8 @@ const request = axios.create({
 request.interceptors.request.use(
     config => {
         console.log(config)
-        if (localStorage.getItem('token')) {
-            config.headers.token = localStorage.getItem('token')
+        if (store.state.staff.Token) {
+            config.headers.token = store.state.staff.Token
         }
         return config
     },
@@ -28,10 +29,7 @@ request.interceptors.response.use(
         console.log(error.response)
         if(error.response.status===401)
         {
-            localStorage.removeItem('token')
-            localStorage.removeItem('staffFullname')
-            localStorage.removeItem('staffUsername')
-            localStorage.removeItem('staffId')
+            store.commit('clearStaff')
             router.push({path: '/login'})
         }
 

src/views/Home.vue

@@ -30,15 +30,15 @@
                   display: flex; flex-direction: row-reverse; align-items: center">
             <div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px;
                       display: flex; justify-content: center;align-items: center;">
-              <span style="color: white">{{ staffFullname[0] }}</span>
+              <span style="color: white">{{ this.$store.state.staff.staffFullname[0] }}</span>
             </div>
             <div style="height: 100%; margin-right: 10px;
                       display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
             <span
                 style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; ">
-              {{ staffFullname }}</span>
+              {{ this.$store.state.staff.staffFullname }}</span>
               <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{
-                  staffUsername
+                  this.$store.state.staff.staffUsername
                 }}</span>
 
             </div>
@@ -67,15 +67,11 @@ export default {
   components: {},
   data() {
     return {
-      staffFullname: '',
-      staffUsername: '',
-      staffId: ''
+
     }
   },
   mounted() {
-    this.staffFullname = localStorage.getItem('staffFullname');
-    this.staffUsername = localStorage.getItem('staffUsername');
-    this.staffId = localStorage.getItem('staffId');
+
   },
   methods: {
 
@@ -84,9 +80,7 @@ export default {
         url: 'staff/logout',
         method: 'post',
       }).then(response => {
-        localStorage.removeItem('token')
-        localStorage.removeItem('staffFullname')
-        localStorage.removeItem('staffUsername')
+        this.$store.commit('clearStaff')
         router.push({path: '/login'})
       }).catch(function (error) {
         console.log(error)

src/views/Login.vue

@@ -34,6 +34,7 @@ import {User, Key} from '@element-plus/icons'
 import {reactive, ref} from 'vue'
 import request from '@/utils/request'
 import router from '@/router'
+import store from '@/store'
 import baseUrl from "@/utils/baseUrl";
 import md5 from 'blueimp-md5'
 
@@ -55,10 +56,7 @@ const onSubmit = () => {
   axios.post(baseUrl + 'staff/login', param).then(function (response) {
     if (response.data.code === 200) {
       console.log(response.data)
-      localStorage.setItem('token', response.data.data.Token)
-      localStorage.setItem('staffFullname', response.data.data.staffFullname)
-      localStorage.setItem('staffUsername', response.data.data.staffUsername)
-      localStorage.setItem('staffId', response.data.data.staffId)
+      store.commit('setStaff', response.data.data)
       router.push({path: '/'})
     } else {
       console.log(response.data)
@@ -66,7 +64,7 @@ const onSubmit = () => {
     }
   }).catch(function (error) {
     console.log('error:')
-    console.log(error.response);
+    console.log(error);
     showAlert.value = true
   });
 }