From e943304e9727c1c8999f21e94b7fafb1209411ae Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Tue, 11 Feb 2025 10:23:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- src/App.vue | 22 ++++++--- src/assets/menuIcon/n_user.svg | 1 + src/assets/menuIcon/s_user.svg | 1 + src/eventBus.ts | 2 +- src/router/index.ts | 14 +++--- src/services/axios.ts | 53 ++++++++++----------- src/services/httpRequest.ts | 64 ++++++++++++++++++++++++++ src/services/user/userManager.ts | 21 +++++++++ src/views/components/menu.ts | 6 +++ src/views/login/index.vue | 92 ++++++++++++++++++------------------- src/views/userManage/UserManage.vue | 63 +++++++++++++++++++++++++ vite.config.ts | 7 +++ 13 files changed, 258 insertions(+), 92 deletions(-) create mode 100644 src/assets/menuIcon/n_user.svg create mode 100644 src/assets/menuIcon/s_user.svg create mode 100644 src/services/httpRequest.ts create mode 100644 src/services/user/userManager.ts create mode 100644 src/views/userManage/UserManage.vue diff --git a/.env b/.env index 3bb47b5..4048a53 100644 --- a/.env +++ b/.env @@ -1,3 +1,3 @@ -VITE_API_HOST=window.location.hostname -VITE_API_PORT=80 +VITE_API_HOST=127.0.0.1 +VITE_API_PORT=8080 VITE_WS_PATH=/api/v1/app/ws/state \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index c925ce0..303b513 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,18 +1,26 @@ diff --git a/src/assets/menuIcon/n_user.svg b/src/assets/menuIcon/n_user.svg new file mode 100644 index 0000000..84a6b4a --- /dev/null +++ b/src/assets/menuIcon/n_user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/menuIcon/s_user.svg b/src/assets/menuIcon/s_user.svg new file mode 100644 index 0000000..3bde347 --- /dev/null +++ b/src/assets/menuIcon/s_user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/eventBus.ts b/src/eventBus.ts index f839d01..0139194 100644 --- a/src/eventBus.ts +++ b/src/eventBus.ts @@ -1,6 +1,6 @@ import mitt from 'mitt' type Events = { - menuId: number, + invalidToken: void, } export const eventBus = mitt() \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index a3708f2..f303cf5 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,9 +1,11 @@ import { createRouter, createWebHistory } from 'vue-router' +import UserManage from '@/views/userManage/UserManage.vue' + const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { - path: '/', + path: '/login', name: 'login', //@ts-ignore component: () => import('../views/login/index.vue'), @@ -51,13 +53,13 @@ const router = createRouter({ name: 'oreManage', component: () => import('../views/oreManage/index.vue'), }, - + { + path: '/userManage', + name: 'userManage', + component: UserManage + } ] - - }, - - ], }) diff --git a/src/services/axios.ts b/src/services/axios.ts index 385e935..f6455e8 100644 --- a/src/services/axios.ts +++ b/src/services/axios.ts @@ -1,6 +1,7 @@ -import axios from "axios"; +import { eventBus } from "@/eventBus"; +import axios, { AxiosHeaders } from "axios"; -const url = `${window.location.protocol}://${import.meta.env.VITE_API_HOST}:${import.meta.env.VITE_API_PORT}`; +const url = `http://${import.meta.env.VITE_API_HOST}:${import.meta.env.VITE_API_PORT}`; const apiClient = axios.create({ baseURL: url, // 设置请求的根路径 @@ -11,37 +12,33 @@ const apiClient = axios.create({ }); // 请求拦截器 -// apiClient.interceptors.request.use( -// (config) => { -// const token = sessionStorage.getItem("token"); -// if (!config.headers) { -// config.headers = AxiosHeaders.from({}); // 确保 config.headers 是 AxiosHeaders 类型 -// } +apiClient.interceptors.request.use( + config => { + const token = sessionStorage.getItem("token"); + if (!config.headers) { + config.headers = AxiosHeaders.from({}); // 确保 config.headers 是 AxiosHeaders 类型 + } -// if (token) { -// config.headers.set("Authorization", `Bearer ${encodeURIComponent(token)}`); // 使用 set 方法设置 Authorization -// } + if (token) { + config.headers.set("Authorization", token); + } -// return config; -// }, -// error => { -// return Promise.reject(error); -// } -// ); + return config; + }, + error => { + return Promise.reject(error); + } +); // 响应拦截器 apiClient.interceptors.response.use( - (response) => { - if (response.data && response.data.dataType === "ZAppPromopt") { - if (response.data.ecode === "USR_NOT_EXIT") { - return Promise.resolve(response.data); - } else if (response.data.ecode === "USR_PASSWORD_ERROR") { - return Promise.resolve(response.data); - } else { - console.log("接口出错", response.data); - // eventBus.emit("show-error-modal", response.data.data); - return Promise.reject(response.data); + response => { + if (response.data) { + if (response.data.code === "A0230") { + // 访问令牌无效或已过期 + eventBus.emit("invalidToken"); } + return Promise.resolve(response); } return response; }, @@ -55,4 +52,4 @@ apiClient.interceptors.response.use( } ); -export default apiClient; +export default apiClient; \ No newline at end of file diff --git a/src/services/httpRequest.ts b/src/services/httpRequest.ts new file mode 100644 index 0000000..46ed9f7 --- /dev/null +++ b/src/services/httpRequest.ts @@ -0,0 +1,64 @@ +import { Subject } from "rxjs"; + +export interface BaseResponse { + success: boolean; + code: string; + msg: string; + data: T; +} + +type HttpReqParam = { + url: string; + method?: "GET" | "POST" | "PATCH" | "PUT" | "DELETE"; + params?: Record; + encode?: "form" | "json"; // 入参编码类型 + headers?: Record; +}; + +export type ApiException = "invalidToken" | "serverError"; + +const exceptionSub = new Subject(); +export const exceptionOb = exceptionSub.asObservable(); + +function extHandle(res: BaseResponse) { + if (res.code === "A0230") { + // 访问令牌无效或已过期 + exceptionSub.next("invalidToken"); + } + return { + ...res, + success: res.code === "00000", + }; +} + +export default async function httpRequest({ url, method = "GET", params = {}, encode = "json", headers = {} }: HttpReqParam) { + const token = sessionStorage.getItem("token"); + if (token) { + headers = { Authorization: token, ...headers }; + } + if (method === "GET") { + const query = urlEncode(params); + const _url = query ? url + "?" + query : url; + const res = await fetch(_url, { headers }); + return res.json().then(res => extHandle(res) as T); + } else { + const body = encode === "json" ? JSON.stringify(params) : urlEncode(params); + const _headers = + encode === "json" + ? { "Content-Type": "application/json; charset=utf-8", ...headers } + : { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8", ...headers }; + const res = await fetch(url, { method, headers: _headers, body }); + return res.json().then(res => extHandle(res) as T); + } +} +export function urlEncode(params?: Record) { + let query = ""; + if (params && Object.keys(params).length > 0) { + const qs = []; + for (let attr in params) { + qs.push(`${attr}=${encodeURIComponent(params[attr])}`); + } + query = qs.join("&"); + } + return query; +} diff --git a/src/services/user/userManager.ts b/src/services/user/userManager.ts new file mode 100644 index 0000000..914574f --- /dev/null +++ b/src/services/user/userManager.ts @@ -0,0 +1,21 @@ +import httpRequest, { type BaseResponse } from "../httpRequest"; + +export function login(params: { username: string; password: string }) { + return httpRequest>({ url: `/api/auth/login`, method: "POST", params }); +} + +export type User = { + id: number; + username: string; + nickname: string; // 用户显示 + password: string; + role: number; // 1: admin +}; + +export function getUserList(params: { pageNum: number; pageSize: number }) { + return httpRequest>({ url: "/api/user/list", params }); +} + +export function getCurrentUser() { + return httpRequest>({ url: "/api/user/current" }); +} diff --git a/src/views/components/menu.ts b/src/views/components/menu.ts index b12a388..9d1aab9 100644 --- a/src/views/components/menu.ts +++ b/src/views/components/menu.ts @@ -34,4 +34,10 @@ export const menuIcon = [{ s_icon: '/src/assets/menuIcon/s_ore.svg', n_icon: '/src/assets/menuIcon/n_ore.svg', path: '/oreManage', +},{ + id: 6, + name: '用户管理', + s_icon: '/src/assets/menuIcon/s_user.svg', + n_icon: '/src/assets/menuIcon/n_user.svg', + path: '/userManage', }] \ No newline at end of file diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 6c6c701..99e910b 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,51 +1,47 @@ - - - + \ No newline at end of file +@import "./login.css"; + diff --git a/src/views/userManage/UserManage.vue b/src/views/userManage/UserManage.vue new file mode 100644 index 0000000..f6fe33c --- /dev/null +++ b/src/views/userManage/UserManage.vue @@ -0,0 +1,63 @@ + + + diff --git a/vite.config.ts b/vite.config.ts index 7f752bb..e2aa9d7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -16,5 +16,12 @@ export default defineConfig({ server: { host: "0.0.0.0", port: 5174, + proxy: { + '/api': { + target: 'http://127.0.0.1:8080', + changeOrigin: true, + // rewrite: (path) => path.replace(/^\/api/, ''), + }, + }, }, });