From d4bfc53bbf127aae0b06d59070b195b4b432ed6f Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Tue, 26 Sep 2023 23:54:17 +0800 Subject: [PATCH] feat: request token --- src/api/login/index.ts | 2 +- src/api/login/types/login.ts | 1 - src/error/onRequestError.ts | 26 ++++++++++++ src/router/guard/permission.ts | 16 +++---- src/store/modules/kungalgamer.ts | 11 +---- src/styles/theme/color.scss | 4 +- src/utils/request.ts | 30 ++++++------- vite.config.ts | 72 ++++++++++++++++---------------- 8 files changed, 91 insertions(+), 71 deletions(-) create mode 100644 src/error/onRequestError.ts diff --git a/src/api/login/index.ts b/src/api/login/index.ts index d16b96c4..224fec19 100644 --- a/src/api/login/index.ts +++ b/src/api/login/index.ts @@ -4,7 +4,7 @@ import type * as Login from './types/login' const loginURLs = { login: `/login/login`, register: `/login/register`, - verificationCode: `/auth/email/send`, + verificationCode: `/auth/email/code`, } // 获取用户登录数据 diff --git a/src/api/login/types/login.ts b/src/api/login/types/login.ts index 4ed89591..5a5dce99 100644 --- a/src/api/login/types/login.ts +++ b/src/api/login/types/login.ts @@ -25,5 +25,4 @@ export type LoginResponseData = KUNGalgameResponseData<{ name: string avatar: string token: string - refreshToken: string }> diff --git a/src/error/onRequestError.ts b/src/error/onRequestError.ts new file mode 100644 index 00000000..93e18015 --- /dev/null +++ b/src/error/onRequestError.ts @@ -0,0 +1,26 @@ +// 全局消息组件（顶部） +import message from '@/components/alert/Message' +// 导入路由 +import router from '@/router' + +export function onRequestError(response: Response) { + if (response.status === 401) { + message( + 'Login expired, please log in again.', + '登陆过期，请重新登陆', + 'error' + ) + } + + if (response.status === 404) { + message( + 'Not Found, request address is incorrect.', + '资源未找到，请求地址出错', + 'error' + ) + } + + if (response.status === 500) { + message('Internal Server Error', '服务器遇到了未处理的错误', 'error') + } +} diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts index bdf3be82..3ede65d5 100644 --- a/src/router/guard/permission.ts +++ b/src/router/guard/permission.ts @@ -1,17 +1,17 @@ -import { Router } from 'vue-router' -import { type RouteRecordRaw } from 'vue-router' -import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer' +// 导入 rooter +import { Router, RouteRecordRaw } from 'vue-router' +// 导入公共路由，无需鉴权 import { WHITE_LIST } from '../router' -import { storeToRefs } from 'pinia' -import { unref } from 'vue' +// 导入获取 token 的函数 +import { getToken } from '@/utils/cookie' // 临时使用 import { asyncRoutes } from '../router' export const createPermission = (router: Router) => { router.beforeEach(async (to, from, next) => { - const useStore = useKUNGalgameUserStore() - const { token } = storeToRefs(useStore) + // 获取当前 token，access token，refresh 在 服务器端 http only + const token = getToken() const getRoute = asyncRoutes // 白名单 @@ -21,7 +21,7 @@ export const createPermission = (router: Router) => { } // 没有token - if (!unref(token)) { + if (!token) { if (!to.meta?.permission && getRoute.length > 0) { next() return diff --git a/src/store/modules/kungalgamer.ts b/src/store/modules/kungalgamer.ts index 81b94cb3..219e452b 100644 --- a/src/store/modules/kungalgamer.ts +++ b/src/store/modules/kungalgamer.ts @@ -22,7 +22,6 @@ interface UserState { name: string avatar: string token: string - refreshToken: string } // 这里用了 pinia-plugin-persistedstate，直接存储 token 即可 @@ -35,7 +34,6 @@ export const useKUNGalgameUserStore = defineStore({ name: '', avatar: '', token: '', - refreshToken: '', }), getters: {}, actions: { @@ -45,11 +43,6 @@ export const useKUNGalgameUserStore = defineStore({ this.name = name this.avatar = avatar }, - // 设置用户 token - setToken(token: string, refreshToken: string): void { - this.token = token - setToken(refreshToken) - }, // 登陆 login(request: LoginRequestData): Promise { return new Promise((resolve, reject) => { @@ -58,7 +51,7 @@ export const useKUNGalgameUserStore = defineStore({ .then((res) => { if (res.data) { this.setUserInfo(res.data.uid, res.data.name, res.data.avatar) - this.setToken(res.data.token, res.data.refreshToken) + setToken(res.data.token) } else (error: Error) => { throw new Error('500 Server ERROR', error) @@ -90,7 +83,7 @@ export const useKUNGalgameUserStore = defineStore({ .then((res) => { if (res.data) { this.setUserInfo(res.data.uid, res.data.name, res.data.avatar) - this.setToken(res.data.token, res.data.refreshToken) + setToken(res.data.token) } else (error: Error) => { throw new Error('500 Server ERROR', error) diff --git a/src/styles/theme/color.scss b/src/styles/theme/color.scss index ef1f98f8..a5973563 100644 --- a/src/styles/theme/color.scss +++ b/src/styles/theme/color.scss @@ -61,8 +61,8 @@ html { --shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05); - --kungalgame-shadow-0: 5px 5px 7px var(--kungalgame-blue-1), - -5px -5px 10px var(--kungalgame-blue-1); + --kungalgame-shadow-0: 5px 5px 10px var(--kungalgame-trans-blue-1), + -5px -5px 10px var(--kungalgame-trans-blue-1); --kungalgame-shadow-1: 2px 2px 4px var(--kungalgame-blue-1), -2px -2px 4px var(--kungalgame-blue-1); --kungalgame-shadow-2: inset 1px 1px 2px var(--kungalgame-blue-1), diff --git a/src/utils/request.ts b/src/utils/request.ts index de066b46..14f6e016 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,5 +1,7 @@ // 操作 cookie 的函数 import { getToken } from '@/utils/cookie' +// 错误处理函数 +import { onRequestError } from '@/error/onRequestError' type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' @@ -13,22 +15,22 @@ const fetchRequest = async ( url: string, options: FetchOptions ): Promise => { - try { - const baseUrl = import.meta.env.VITE_API_BASE_URL - const fullUrl = `${baseUrl}${url}` + const baseUrl = import.meta.env.VITE_API_BASE_URL + const fullUrl = `${baseUrl}${url}` - const response = await fetch(fullUrl, options) - - if (!response.ok) { - throw new Error('Request Error!') - } - - const data: T = await response.json() - return data - } catch (error) { - console.error('Fetch Error:', error) - throw new Error('Request Error!') + // 在请求头中添加 token + const headers = { + ...options.headers, + Authorization: `Bearer ${getToken()}`, } + + const response = await fetch(fullUrl, { ...options, headers }) + + // 处理错误 + onRequestError(response) + + const data: T = await response.json() + return data } const fetchGet = async ( diff --git a/vite.config.ts b/vite.config.ts index af0f1080..0114c196 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,42 +15,42 @@ export default defineConfig({ '@': path.resolve(__dirname, './src'), }, }, - server: { - /** 是否开启 HTTPS */ - https: false, - /** 设置 host: true 才可以使用 Network 的形式，以 IP 访问项目 */ - host: true, // host: "0.0.0.0" - /** 端口号 */ - port: 1007, - /** 是否自动打开浏览器 */ - open: false, - /** 跨域设置允许 */ - cors: true, - /** 端口被占用时，是否直接退出 */ - strictPort: true, - /** 接口代理 */ - proxy: {}, - }, - build: { - /** 打包大小超过 500kb 警告 */ - chunkSizeWarningLimit: 500, - /** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */ - minify: 'terser', - /** 在打包代码时移除 console.log、debugger 和 注释 */ - terserOptions: { - compress: { - drop_console: false, - drop_debugger: true, - pure_funcs: ['console.log'], - }, - format: { - /** 删除注释 */ - comments: false, - }, - }, - /** 打包后静态资源目录 */ - assetsDir: 'kun', - }, + // server: { + // /** 是否开启 HTTPS */ + // https: false, + // /** 设置 host: true 才可以使用 Network 的形式，以 IP 访问项目 */ + // host: '127.0.0.1', // host: "0.0.0.0" + // /** 端口号 */ + // port: 1007, + // /** 是否自动打开浏览器 */ + // open: false, + // /** 跨域设置允许 */ + // cors: true, + // /** 端口被占用时，是否直接退出 */ + // strictPort: true, + // /** 接口代理 */ + // proxy: {}, + // }, + // build: { + // /** 打包大小超过 500kb 警告 */ + // chunkSizeWarningLimit: 500, + // /** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */ + // minify: 'terser', + // /** 在打包代码时移除 console.log、debugger 和 注释 */ + // terserOptions: { + // compress: { + // drop_console: false, + // drop_debugger: true, + // pure_funcs: ['console.log'], + // }, + // format: { + // /** 删除注释 */ + // comments: false, + // }, + // }, + // /** 打包后静态资源目录 */ + // assetsDir: 'kun', + // }, // 消除 i18n 警告 define: { __VUE_I18N_FULL_INSTALL__: true,