fix: 改用jwt

cumt-robin · Apr 30, 2024 · 48c49fb · 48c49fb
1 parent c22b087
commit 48c49fb
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 30 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,8 +13,8 @@
     "editor.formatOnSave": false,
     // 代码保存动作
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
-        "source.fixAll.stylelint": true
+        "source.fixAll.eslint": "explicit",
+        "source.fixAll.stylelint": "explicit"
     },
     "fileheader.customMade": {
         "author": "Tusi", // 换成自己名字

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -142,10 +142,10 @@ const clearUserInfo = () => {
 router.beforeEach((to, from, next) => {
     // 基本校验
     if (to.meta.auth) {
-        // 需要鉴权的页面，进行前端检查，主要检查cookie中有没有标志位islogined
+        // 需要鉴权的页面，进行前端检查，主要检查token有没有
         // 后端依旧需要对需要鉴权的接口访问做校验，不能依赖前端的判定
-        const isLogined = Cookies.get("islogined");
-        if (isLogined === "1") {
+        const token = localStorage.getItem("token");
+        if (token) {
             next();
         } else {
             clearUserInfo();

diff --git a/src/services/index.ts b/src/services/index.ts
@@ -26,6 +26,10 @@ api.defaults.transformRequest = (data) => {
 };
 
 api.interceptors.request.use((config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+    }
     return config;
 });
 

diff --git a/src/store/constants.ts b/src/store/constants.ts
@@ -9,6 +9,8 @@ export const SET_COMMENT_USER_INFO = "setCommentUserInfo";
 
 export const SET_USER_INFO = "setUserInfo";
 
+export const SET_USER_TOKEN = "setUserToken";
+
 // Root Actions
 export const LOGIN_ACTION = "loginAction";
 

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -4,13 +4,13 @@
  */
 import { InjectionKey } from "vue";
 import { createStore, Store, ActionContext } from "vuex";
-import Cookies from "js-cookie";
-import { SET_IS_MENU_VISIBLE, SET_COMMENT_USER_INFO, SET_USER_INFO, LOGIN_ACTION, LOGOUT_ACTION } from "./constants";
+import { SET_IS_MENU_VISIBLE, SET_COMMENT_USER_INFO, SET_USER_INFO, SET_USER_TOKEN, LOGIN_ACTION, LOGOUT_ACTION } from "./constants";
 import { CommentUserInfo, UserDTO } from "@/bean/dto";
 import { userService } from "@/services/user";
 import { LoginModel } from "@/bean/xhr";
 
 export interface RootState {
+    token: string;
     isMenuVisible: boolean;
     commentUserInfo: CommentUserInfo | null;
     userInfo: UserDTO | null;
@@ -30,14 +30,17 @@ if (userInfoInStorage) {
     userInfo = JSON.parse(userInfoInStorage);
 }
 
+const token = localStorage.getItem("token") || "";
+
 const store = createStore<RootState>({
     state: {
+        token,
         isMenuVisible: false,
         commentUserInfo,
         userInfo,
     },
     getters: {
-        isAuthed: (state) => !!state.userInfo,
+        isAuthed: (state) => !!state.token,
     },
     mutations: {
         [SET_IS_MENU_VISIBLE](state: RootState, payload: boolean): void {
@@ -61,37 +64,32 @@ const store = createStore<RootState>({
                 localStorage.removeItem("userInfo");
             }
         },
+        [SET_USER_TOKEN](state: RootState, payload: string): void {
+            if (payload) {
+                state.token = payload;
+                localStorage.setItem("token", payload);
+            } else {
+                state.token = "";
+                localStorage.removeItem("token");
+            }
+        },
     },
     actions: {
         // 用户登录
         async [LOGIN_ACTION]({ commit }: ActionContext<RootState, RootState>, payload: LoginModel): Promise<UserDTO> {
-            const res = await userService.login(payload);
-            const userInfo = res.data;
+            const { data } = await userService.login(payload);
+            const userInfo = data;
+            commit(SET_USER_TOKEN, data.token);
             commit(SET_USER_INFO, userInfo);
             return userInfo;
         },
         // 用户登出
         async [LOGOUT_ACTION]({ commit }: ActionContext<RootState, RootState>): Promise<void> {
             await userService.logout();
+            commit(SET_USER_TOKEN, null);
             commit(SET_USER_INFO, null);
         },
     },
 });
 
-export const checkAuthState = (): void => {
-    const isLogined = Cookies.get("islogined");
-    if (isLogined !== "1") {
-        // islogined失效
-        store.commit(SET_USER_INFO, null);
-    } else {
-        // islogined有效，获取最新user信息
-        userService.current().then((res) => {
-            store.commit(SET_USER_INFO, res.data);
-        });
-    }
-};
-
-// 初始化时检查一次
-checkAuthState();
-
 export default store;
diff --git a/vue.config.js b/vue.config.js
@@ -18,11 +18,11 @@ module.exports = {
         open: true,
         proxy: {
             "/api": {
-                target: "https://blog.wbjiang.cn",
+                target: "http://localhost:8002",
                 changeOrigin: true,
-                // pathRewrite: {
-                //     "^/api": "",
-                // },
+                pathRewrite: {
+                    "^/api": "",
+                },
             },
         },
     },