diff --git a/.env.development b/.env.development index 19e5696..8978310 100644 --- a/.env.development +++ b/.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' diff --git a/.env.production b/.env.production index bbc17b0..dd6b7fd 100644 --- a/.env.production +++ b/.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' diff --git a/.env.staging b/.env.staging index 1f1a8ad..faa905d 100644 --- a/.env.staging +++ b/.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' diff --git a/src/api/login.ts b/src/api/login.ts index 8d8def2..d65ddae 100644 --- a/src/api/login.ts +++ b/src/api/login.ts @@ -1,10 +1,21 @@ import { request } from "@/utils/service" -interface ILoginData { - username: string +export interface ILoginData { + /** 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({ diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 449089f..da189ab 100644 --- a/src/store/modules/user.ts +++ b/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, - password: userInfo.password + username: loginData.username, + password: loginData.password, + code: loginData.code }) .then((res: any) => { - setToken(res.data.accessToken) - token.value = res.data.accessToken + setToken(res.data.token) + 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() diff --git a/src/utils/service.ts b/src/utils/service.ts index 20e1745..7a13b41 100644 --- a/src/utils/service.ts +++ b/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, diff --git a/src/views/login/index.vue b/src/views/login/index.vue index e1b23cf..913b353 100644 --- a/src/views/login/index.vue +++ b/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" - -interface ILoginForm { - /** admin 或 editor */ - username: "admin" | "editor" - /** 密码 */ - password: string - /** 验证码 */ - code: string -} +import { getLoginCodeApi } from "@/api/login" +import type { ILoginData } from "@/api/login" const router = useRouter() const loginFormRef = ref(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()