2024年3月30日06:19:51

Author: caolib

package-lock.json

@@ -26,6 +26,6 @@
     "eslint-plugin-vue": "^9.17.0",
     "unplugin-auto-import": "^0.17.3",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.0.10"
+    "vite": "^5.1.2"
   }
 }

package.json

@@ -108,7 +108,7 @@ const url = ref("https://pic.imgdb.cn/item/65a271fe871b83018a8f9a8f.gif");
             :inactive-action-icon="Sunny"
             style="
             --el-switch-on-color: rgba(19, 206, 102, 0.7);
-            --el-switch-off-color: rgba(141, 141, 141, 0.79);
+            --el-switch-off-color: rgb(74,163,252);
           "
         />
       </el-menu-item>

src/components/HeaderView.vue

@@ -6,15 +6,15 @@ import router from '@/router'
 import ElementPlus from "element-plus";
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
-import {createPersistedState} from "pinia-persistedstate-plugin";
-
 import '@/css/main.css';
-import {createPinia} from "pinia";
 
+import {createPinia} from "pinia";
+import {createPersistedState} from "pinia-persistedstate-plugin";
 
 
 // 导入element-plus中文语言
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
 const app = createApp(App)
 
 // 使用pinia和persist保存状态并持久化

src/main.js

@@ -1,15 +1,5 @@
 import request from "@/util/request.js";
-
-import {useTokenStore} from "@/stores/token";
-import {useReaderStore} from "@/stores/reader";
-import {useAdminStore} from "@/stores/admin";
-import {ElMessage} from "element-plus";
-
-const adminStore = useAdminStore();
-const tokenStore = useTokenStore();
-const readerStore = useReaderStore();
-
-// 用户退出
+// 用户退出登录
 const logoutService = function () {
     // 调用后端接口清除redis中的令牌
     return request.delete('/logout');

src/methods/logout.js

@@ -1,7 +1,6 @@
 import {defineStore} from "pinia";
 import {ref} from 'vue';
 
-
 /**
  * 保存登录时用户的信息
  */
@@ -29,7 +28,7 @@ export const useReaderStore = defineStore('reader', () => {
             reader.value.token = '';
         }
         return {
-            reader, setReader,clearReader
+            reader, setReader, clearReader
         }
     },
     {

src/stores/reader.js

@@ -1,22 +1,23 @@
-import { defineStore } from "pinia";
+import {defineStore} from "pinia";
 import {ref} from 'vue';
-export const useTokenStore = defineStore('token',()=>{
+
+export const useTokenStore = defineStore('token', () => {
         //1.定义描述token
         const token = ref('')
         //2.定义修改token的方法
-        const setToken = (newToken)=>{
+        const setToken = (newToken) => {
             token.value = newToken
         }
         //3.定义移除token的方法
-        const removeToken = ()=>{
-            token.value=''
+        const removeToken = () => {
+            token.value = ''
         }
         return {
-            token,setToken,removeToken
+            token, setToken, removeToken
         }
     },
     {
         //使用persis插件持久化
         persis: true
     }
-)
+)

src/stores/token.js

@@ -5,7 +5,6 @@ import {useTokenStore} from "@/stores/token.js";
 
 const baseURL = "/api";
 const instance = axios.create({baseURL});
-
 const tokenStore = useTokenStore();
 
 
@@ -22,19 +21,22 @@ instance.interceptors.response.use(
     },
     //失败回调
     (error) => {
-        // 状态码为401,419都跳转到登录界面
-        if (error.response) {
-            const code = error.response.status;
-            if (code === 401) {
+        const code = error.response.status;
+        switch (code) {
+            case 401:
                 ElMessage({message: '请先登录！', type: "error",});
-                router.push('/login');
-            } else if (code === 419) {
+                break;
+            case 419:
                 ElMessage.error("身份已过期,请重新登录！");
-                router.push('/login');
-            } else {
+                break;
+            default:
                 ElMessage.error("服务器异常！" + code);
-            }
+                break;
         }
+        router.push('/login');
+        window.local.reload();
+
+
         // 将异步的状态设置为失败状态
         return Promise.reject(error);
     }