diff --git a/package-lock.json b/package-lock.json index 6332cd5..8a73af5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 526443e..6a3ba95 100644 --- a/package.json +++ b/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", diff --git a/src/main.ts b/src/main.ts index 9bbec76..76993bb 100644 --- a/src/main.ts +++ b/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') diff --git a/src/router/index.js b/src/router/index.js index bca15d2..de8e201 100644 --- a/src/router/index.js +++ b/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' ) { diff --git a/src/store/index.js b/src/store/index.js index ea7ba1b..1b8c5f9 100644 --- a/src/store/index.js +++ b/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()] }) diff --git a/src/utils/request.js b/src/utils/request.js index ad77ee9..65295b0 100644 --- a/src/utils/request.js +++ b/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'}) } diff --git a/src/views/Home.vue b/src/views/Home.vue index 2a8308f..f57c964 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -30,15 +30,15 @@ display: flex; flex-direction: row-reverse; align-items: center">
- {{ staffFullname[0] }} + {{ this.$store.state.staff.staffFullname[0] }}
- {{ staffFullname }} + {{ this.$store.state.staff.staffFullname }} {{ - staffUsername + this.$store.state.staff.staffUsername }}
@@ -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) diff --git a/src/views/Login.vue b/src/views/Login.vue index efb4d09..bfb49f6 100644 --- a/src/views/Login.vue +++ b/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 }); }