feat: 登录mock，修改了全局token、axios的请求头的携带方式，路由守卫的token修改，全局的token字段修改为AdminToken

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);
   }

src/api/modules/login.ts

@@ -1,10 +0,0 @@
-import axios from "@/api";
-
-// 登录
-export const LoginAPI = (data: any) => {
-  return axios({
-    url: "store/store.php?action=Login",
-    method: "post",
-    data
-  });
-};

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"
+    });
+  };
+  

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]);
 }

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);
     }

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[];

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");
     // 项目内的跳转，处理跳转路由高亮

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<string>) {
       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")

src/views/login/components/login-banner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="banner_box">
     <div class="banner_title">
-      <SvgIcon name="snow" size="25" @click="onMock" />
+      <SvgIcon name="snow" size="25" />
       {{ title }}
     </div>
     <div class="banner_img">
@@ -10,15 +10,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { mockTestAPI } from "@/api/modules/test/index";
 // 全局title
 const title = import.meta.env.VITE_GLOB_APP_TITLE;
-
-const onMock = async () => {
-  console.log("模拟数据");
-  let res = await mockTestAPI();
-  console.log("数据在这", res);
-};
 </script>
 
 <style lang="scss" scoped>

src/views/login/components/login-form.vue

@@ -41,6 +41,7 @@
 import { Message } from "@arco-design/web-vue";
 import { useRouter } from "vue-router";
 import { useUserInfoStore } from "@/store/modules/user-info";
+import { loginAPI, getUserInfoAPI } from "@/api/modules/user/index";
 
 const router = useRouter();
 const form = ref({
@@ -54,30 +55,12 @@ const rules = ref({
     {
       required: true,
       message: "请输入账号"
-    },
-    {
-      validator: (value: string, cb: any) => {
-        if (value !== verify.value.username) {
-          cb("请输入正确的账号");
-        } else {
-          cb();
-        }
-      }
     }
   ],
   password: [
     {
       required: true,
       message: "请输入密码"
-    },
-    {
-      validator: (value: string, cb: any) => {
-        if (value !== verify.value.password) {
-          cb("请输入正确的密码");
-        } else {
-          cb();
-        }
-      }
     }
   ],
   verifyCode: [
@@ -87,7 +70,7 @@ const rules = ref({
     },
     {
       validator: (value: string, cb: any) => {
-        if (value !== verify.value.verifyCode) {
+        if (value !== verifyCode.value) {
           cb("请输入正确的验证码");
         } else {
           cb();
@@ -96,26 +79,16 @@ const rules = ref({
     }
   ]
 });
-const verify = ref({
-  username: "admin",
-  password: "123456",
-  verifyCode: ""
-});
-const verifyCodeChange = (code: string) => (verify.value.verifyCode = code);
+const verifyCode = ref("");
+const verifyCodeChange = (code: string) => (verifyCode.value = code);
 
 const onSubmit = async ({ errors }: any) => {
   if (errors) return;
-  // 你的登录请求
-  // ......
-
-  // 登录成功-存储用户信息
+  let res = await loginAPI(form.value);
   let stores = useUserInfoStore();
-  let account = {
-    username: form.value.username, // 用户名
-    roles: ["admin"] // 角色权限
-  };
-  stores.setAccount(account); // 存储用户信息
-  stores.setToken("Your-Token");
+  stores.setToken(res.data.token);
+  let account = await getUserInfoAPI();
+  stores.setAccount(account.data); // 存储用户信息
   Message.success("登录成功");
   router.replace("/home");
 };

src/vite-env.d.ts

@@ -16,3 +16,4 @@ declare module "@codemirror/lang-vue";
 declare module "nprogress";
 declare module "@wangeditor/editor-for-vue";
 declare module "@/directives/modules/custom";
+declare module "mockjs";