feat: request token
This commit is contained in:
KUN1007
parent
4c9efffd6d
commit
d4bfc53bbf
|
|
@ -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`,
|
||||
}
|
||||
|
||||
// 获取用户登录数据
|
||||
|
|
|
|||
|
|
@ -25,5 +25,4 @@ export type LoginResponseData = KUNGalgameResponseData<{
|
|||
name: string
|
||||
avatar: string
|
||||
token: string
|
||||
refreshToken: string
|
||||
}>
|
||||
|
|
|
|||
26
src/error/onRequestError.ts
Normal file
26
src/error/onRequestError.ts
Normal file
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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<LoginResponseData> {
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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 <T>(
|
|||
url: string,
|
||||
options: FetchOptions
|
||||
): Promise<T> => {
|
||||
try {
|
||||
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!')
|
||||
// 在请求头中添加 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
|
||||
} catch (error) {
|
||||
console.error('Fetch Error:', error)
|
||||
throw new Error('Request Error!')
|
||||
}
|
||||
}
|
||||
|
||||
const fetchGet = async <T>(
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue