refactor: 对接新的 mock api

.env.development

@@ -4,7 +4,7 @@ NODE_ENV = development
 # 下面是自定义的环境变量，可以修改（命名必须以 VITE_ 开头）
 
 # 后端接口公共路径
-VITE_BASE_API = 'https://vue-typescript-admin-mock-server-armour.vercel.app/mock-api/v1'
+VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
 
 # 路由模式 hash 或 html5
 VITE_ROUTER_HISTORY = 'hash'

.env.production

@@ -4,7 +4,7 @@ NODE_ENV = production
 # 下面是自定义的环境变量，可以修改（命名必须以 VITE_ 开头）
 
 # 后端接口公共路径
-VITE_BASE_API = 'https://vue-typescript-admin-mock-server-armour.vercel.app/mock-api/v1'
+VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
 
 # 路由模式 hash 或 html5
 VITE_ROUTER_HISTORY = 'hash'

.env.staging

@@ -4,7 +4,7 @@ NODE_ENV = production
 # 下面是自定义的环境变量，可以修改（命名必须以 VITE_ 开头）
 
 # 后端接口公共路径
-VITE_BASE_API = 'https://vue-typescript-admin-mock-server-armour.vercel.app/mock-api/v1'
+VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
 
 # 路由模式 hash 或 html5
 VITE_ROUTER_HISTORY = 'hash'

src/api/login.ts

@@ -1,10 +1,21 @@
 import { request } from "@/utils/service"
 
-interface ILoginData {
+export interface ILoginData {
-  username: string
+  /** admin 或 editor */
+  username: "admin" | "editor"
+  /** 密码 */
   password: string
+  /** 验证码 */
+  code: string
 }
 
+/** 获取登录验证码 */
+export function getLoginCodeApi() {
+  return request({
+    url: "login/code",
+    method: "get"
+  })
+}
 /** 登录并返回 Token */
 export function loginApi(data: ILoginData) {
   return request({

src/store/modules/user.ts

@@ -5,6 +5,7 @@ import { usePermissionStore } from "./permission"
 import { getToken, removeToken, setToken } from "@/utils/cache/cookies"
 import router, { resetRouter } from "@/router"
 import { loginApi, getUserInfoApi } from "@/api/login"
+import type { ILoginData } from "@/api/login"
 import type { RouteRecordRaw } from "vue-router"
 
 export const useUserStore = defineStore("user", () => {
@@ -16,15 +17,16 @@ export const useUserStore = defineStore("user", () => {
     roles.value = value
   }
   /** 登录 */
-  const login = (userInfo: { username: string; password: string }) => {
+  const login = (loginData: ILoginData) => {
     return new Promise((resolve, reject) => {
       loginApi({
-        username: userInfo.username,
+        username: loginData.username,
-        password: userInfo.password
+        password: loginData.password,
+        code: loginData.code
       })
         .then((res: any) => {
-          setToken(res.data.accessToken)
+          setToken(res.data.token)
-          token.value = res.data.accessToken
+          token.value = res.data.token
           resolve(true)
         })
         .catch((error) => {
@@ -37,7 +39,7 @@ export const useUserStore = defineStore("user", () => {
     return new Promise((resolve, reject) => {
       getUserInfoApi()
         .then((res: any) => {
-          roles.value = res.data.user.roles
+          roles.value = res.data.roles
           resolve(res)
         })
         .catch((error) => {
@@ -47,7 +49,7 @@ export const useUserStore = defineStore("user", () => {
   }
   /** 切换角色 */
   const changeRoles = async (role: string) => {
-    const newToken = role + "-token"
+    const newToken = "token-" + role
     token.value = newToken
     setToken(newToken)
     await getInfo()

src/utils/service.ts

@@ -31,12 +31,9 @@ function createService() {
           case 0:
             // code === 0 代表没有错误
             return apiData
-          case 20000:
-            // code === 20000 代表没有错误
-            return apiData
           default:
             // 不是正确的 Code
-            ElMessage.error(apiData.msg || "Error")
+            ElMessage.error(apiData.message || "Error")
             return Promise.reject(new Error("Error"))
         }
       }
@@ -96,7 +93,7 @@ function createRequestFunction(service: AxiosInstance) {
     const configDefault = {
       headers: {
         // 携带 Token
-        "X-Access-Token": getToken(),
+        Authorization: "Bearer " + getToken(),
         "Content-Type": get(config, "headers.Content-Type", "application/json")
       },
       timeout: 5000,

src/views/login/index.vue

@@ -5,15 +5,8 @@ import { useUserStore } from "@/store/modules/user"
 import { User, Lock, Key } from "@element-plus/icons-vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 import type { FormInstance, FormRules } from "element-plus"
-
+import { getLoginCodeApi } from "@/api/login"
-interface ILoginForm {
+import type { ILoginData } from "@/api/login"
-  /** admin 或 editor */
-  username: "admin" | "editor"
-  /** 密码 */
-  password: string
-  /** 验证码 */
-  code: string
-}
 
 const router = useRouter()
 const loginFormRef = ref<FormInstance | null>(null)
@@ -23,10 +16,10 @@ const loading = ref(false)
 /** 验证码图片 URL */
 const codeUrl = ref("")
 /** 登录表单数据 */
-const loginForm: ILoginForm = reactive({
+const loginForm: ILoginData = reactive({
   username: "admin",
   password: "12345678",
-  code: "abcd"
+  code: ""
 })
 /** 登录表单校验规则 */
 const loginFormRules: FormRules = {
@@ -45,7 +38,8 @@ const handleLogin = () => {
       useUserStore()
         .login({
           username: loginForm.username,
-          password: loginForm.password
+          password: loginForm.password,
+          code: loginForm.code
         })
         .then(() => {
           router.push({ path: "/" })
@@ -66,12 +60,14 @@ const handleLogin = () => {
 const createCode = () => {
   // 先清空验证码的输入
   loginForm.code = ""
-  // 实际开发中，可替换成自己的地址，这里只是提供一个参考
+  // 获取验证码
-  codeUrl.value = `/api/v1/login/code?${Math.random() * 1000}`
+  getLoginCodeApi().then((res: any) => {
+    codeUrl.value = res.data
+  })
 }
 
 /** 初始化验证码 */
-// createCode()
+createCode()
 </script>
 
 <template>
@@ -111,7 +107,7 @@ const createCode = () => {
               type="text"
               tabindex="3"
               :prefix-icon="Key"
-              maxlength="4"
+              maxlength="7"
               size="large"
             />
             <span class="show-code">