From 1c27fab1b29e5fced21ea78a32c8254e266f702d Mon Sep 17 00:00:00 2001 From: wf <2547096351@qq.com> Date: Thu, 31 Oct 2024 14:47:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95mock=EF=BC=8C?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E5=85=A8=E5=B1=80token=E3=80=81axio?= =?UTF-8?q?s=E7=9A=84=E8=AF=B7=E6=B1=82=E5=A4=B4=E7=9A=84=E6=90=BA?= =?UTF-8?q?=E5=B8=A6=E6=96=B9=E5=BC=8F=EF=BC=8C=E8=B7=AF=E7=94=B1=E5=AE=88?= =?UTF-8?q?=E5=8D=AB=E7=9A=84token=E4=BF=AE=E6=94=B9=EF=BC=8C=E5=85=A8?= =?UTF-8?q?=E5=B1=80=E7=9A=84token=E5=AD=97=E6=AE=B5=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BAAdminToken?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 21 ++++------ src/api/modules/login.ts | 10 ----- src/api/modules/user/index.ts | 20 ++++++++++ src/mock/index.ts | 4 +- src/mock/test/index.ts | 4 +- src/mock/user/index.ts | 31 +++++++++++++++ src/router/index.ts | 8 ++-- src/store/modules/user-info.ts | 6 +-- src/views/login/components/login-banner.vue | 9 +---- src/views/login/components/login-form.vue | 43 ++++----------------- src/vite-env.d.ts | 1 + 11 files changed, 80 insertions(+), 77 deletions(-) delete mode 100644 src/api/modules/login.ts create mode 100644 src/api/modules/user/index.ts create mode 100644 src/mock/user/index.ts diff --git a/src/api/index.ts b/src/api/index.ts index c60e60a..4dcb39b 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -2,26 +2,22 @@ import axios from "axios"; import router from "@/router"; import { Message } from "@arco-design/web-vue"; -const MockFlag = import.meta.env.VITE_APP_OPEN_MOCK === "true"; -console.log("在这里axios", import.meta.env.VITE_APP_OPEN_MOCK, MockFlag); +// 是否开启本地mock +const MOCK_FLAG = import.meta.env.VITE_APP_OPEN_MOCK === "true"; + // 创建axios实例 const service = axios.create({ - baseURL: MockFlag ? "" : "/api" + baseURL: MOCK_FLAG ? "" : "/api" }); // 请求拦截器 service.interceptors.request.use( function (config: any) { // 发送请求之前做什么 // 获取token鉴权 - let userInfo: any = {}; - if (localStorage.getItem("user-info")) { - userInfo = JSON.parse(localStorage.getItem("user-info") as string); - } - if (userInfo.token) { + if (localStorage.getItem("AdminToken")) { // 有token，在请求头中携带token - config.headers.Authorization = userInfo.token; + config.headers.Authorization = localStorage.getItem("AdminToken"); } - console.log("请求拦截", config); return config; }, function (error: any) { @@ -33,7 +29,6 @@ service.interceptors.request.use( // 响应拦截器 service.interceptors.response.use( function (response: any) { - console.log("响应了", response); if (response.status != 200) { Message.error("服务器异常，请联系管理员"); return Promise.reject(response.data); @@ -47,7 +42,7 @@ service.interceptors.response.use( Message.error("请求连接超时"); return Promise.reject(res); } else if (res.code != 200) { - Message.error(res.msg); + Message.error(res.message); return Promise.reject(res); } else { // 返回数据 @@ -55,7 +50,7 @@ service.interceptors.response.use( } }, function (error: any) { - localStorage.removeItem("user-info"); + localStorage.removeItem("AdminToken"); router.push("/login"); return Promise.reject(error); } diff --git a/src/api/modules/login.ts b/src/api/modules/login.ts deleted file mode 100644 index 5e17545..0000000 --- a/src/api/modules/login.ts +++ /dev/null @@ -1,10 +0,0 @@ -import axios from "@/api"; - -// 登录 -export const LoginAPI = (data: any) => { - return axios({ - url: "store/store.php?action=Login", - method: "post", - data - }); -}; diff --git a/src/api/modules/user/index.ts b/src/api/modules/user/index.ts new file mode 100644 index 0000000..c3145e3 --- /dev/null +++ b/src/api/modules/user/index.ts @@ -0,0 +1,20 @@ +import axios from "@/api"; + +// 登录 +export const loginAPI = (data: any) => { + return axios({ + url: "/mock/login", + method: "post", + data + }); +}; + + +// 获取用户信息 +export const getUserInfoAPI = () => { + return axios({ + url: "/mock/user/info", + method: "get" + }); + }; + \ No newline at end of file diff --git a/src/mock/index.ts b/src/mock/index.ts index 8eb2a69..c54d28d 100644 --- a/src/mock/index.ts +++ b/src/mock/index.ts @@ -1,7 +1,7 @@ import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer"; import testModule from "./test/index"; -// import userModule from './user/index' +import userModule from "./user/index"; // import tableModule from './person/index' // import systemModule from './system/index' // import fileModule from './file/index' @@ -9,5 +9,5 @@ import testModule from "./test/index"; // import areaModule from './area/index' export function setupProdMockServer() { - createProdMockServer([...testModule]); + createProdMockServer([...testModule, ...userModule]); } diff --git a/src/mock/test/index.ts b/src/mock/test/index.ts index 74db144..3474184 100644 --- a/src/mock/test/index.ts +++ b/src/mock/test/index.ts @@ -5,7 +5,7 @@ export default [ { url: "/mock/test/success", method: "get", - timeout: 500, + timeout: 300, response: () => { return resultSuccess("mock数据成功了"); } @@ -13,7 +13,7 @@ export default [ { url: "/mock/test/fail", method: "get", - timeout: 500, + timeout: 300, response: () => { return resultError(null, "请求数据出错了", 500); } diff --git a/src/mock/user/index.ts b/src/mock/user/index.ts new file mode 100644 index 0000000..f977be3 --- /dev/null +++ b/src/mock/user/index.ts @@ -0,0 +1,31 @@ +import type { MockMethod } from "vite-plugin-mock"; +import { resultSuccess, resultError } from "../_utils"; + +// post请求body,get请求query +export default [ + { + url: "/mock/login", + method: "post", + timeout: 300, + response: ({ body }) => { + let { username, password } = body; + if (username === "admin" && password === "123456") { + // 请求成功返回token + return resultSuccess({ token: "Your-Token" }); + } + return resultError(null, "账号或者密码错误", 500); + } + }, + { + url: "/mock/user/info", + method: "get", + timeout: 300, + response: () => { + let data = { + username: "admin", // 用户名 + roles: ["admin"] // 角色 + }; + return resultSuccess(data); + } + } +] as MockMethod[]; diff --git a/src/router/index.ts b/src/router/index.ts index a4969d8..50631ea 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -39,16 +39,16 @@ const router = createRouter({ router.beforeEach(async (to, from, next) => { NProgress.start(); // 开启进度条 const store = useUserInfoStore(pinia); - const { token } = storeToRefs(store); + const { AdminToken } = storeToRefs(store); console.log("去", to, "来自", from); // next()内部加了path等于跳转指定路由会再次触发router.beforeEach，内部无参数等于放行，不会触发router.beforeEach - if (to.path === "/login" && !token.value) { + if (to.path === "/login" && !AdminToken.value) { // 1、去登录页，无token，放行 next(); - } else if (!token.value) { + } else if (!AdminToken.value) { // 2、没有token，直接重定向到登录页 next("/login"); - } else if (to.path === "/login" && token.value) { + } else if (to.path === "/login" && AdminToken.value) { // 3、去登录页，有token，直接重定向到home页 next("/home"); // 项目内的跳转，处理跳转路由高亮 diff --git a/src/store/modules/user-info.ts b/src/store/modules/user-info.ts index 85879a3..c2e4029 100644 --- a/src/store/modules/user-info.ts +++ b/src/store/modules/user-info.ts @@ -12,18 +12,18 @@ export const useUserInfoStore = defineStore("user-info", { username: "", roles: [] }, // 账号信息 - token: "" // token + AdminToken: "" // token }), actions: { async setAccount(data: Array) { this.account = data; }, async setToken(data: string) { - this.token = data; + this.AdminToken = data; }, async logOut() { this.account = {}; - this.token = ""; + this.AdminToken = ""; } }, persist: persistedstateConfig("user-info") diff --git a/src/views/login/components/login-banner.vue b/src/views/login/components/login-banner.vue index 8e025b5..44b12fb 100644 --- a/src/views/login/components/login-banner.vue +++ b/src/views/login/components/login-banner.vue @@ -1,7 +1,7 @@