fix: 对接登录接口

components.d.ts

@@ -11,6 +11,9 @@ declare module 'vue' {
     ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

package.json

@@ -13,11 +13,13 @@
   },
   "dependencies": {
     "element-plus": "^2.9.8",
-    "hook-fetch": "^0.0.9-beta",
+    "hook-fetch": "^1.0.1",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.2.0",
     "reset-css": "^5.0.2",
     "vue": "^3.5.13",
-    "vue-router": "4",
-    "vue-element-plus-x": "^1.1.2-beta"
+    "vue-element-plus-x": "1.1.5-beta",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.12.0",

src/api/auth/index.ts

@@ -1,4 +1,4 @@
-import type { LoginDTO } from './types';
+import type { LoginDTO, LoginVO } from './types';
 import { post } from '@/utils/request';
 
-export const login = (data: LoginDTO) => post('/auth/login', data);
+export const login = (data: LoginDTO) => post<LoginVO>('/auth/login', data);

src/api/auth/types.ts

@@ -2,3 +2,117 @@ export interface LoginDTO {
   username: string;
   password: string;
 }
+
+export interface LoginVO {
+  access_token?: string;
+  token?: string;
+  userInfo?: LoginUser;
+}
+
+/**
+ * LoginUser，登录用户身份权限
+ */
+export interface LoginUser {
+  /**
+   * 微信头像
+   */
+  avatar?: string;
+  /**
+   * 浏览器类型
+   */
+  browser?: string;
+  /**
+   * 部门ID
+   */
+  deptId?: number;
+  /**
+   * 部门名
+   */
+  deptName?: string;
+  /**
+   * 过期时间
+   */
+  expireTime?: number;
+  /**
+   * 登录IP地址
+   */
+  ipaddr?: string;
+  /**
+   * 获取登录id
+   */
+  loginId?: string;
+  /**
+   * 登录地点
+   */
+  loginLocation?: string;
+  /**
+   * 登录时间
+   */
+  loginTime?: number;
+  /**
+   * 菜单权限
+   */
+  menuPermission?: string[];
+  /**
+   * 用户名
+   */
+  nickName?: string;
+  /**
+   * 操作系统
+   */
+  os?: string;
+  /**
+   * 数据权限 当前角色ID
+   */
+  roleId?: number;
+  /**
+   * 角色权限
+   */
+  rolePermission?: string[];
+  /**
+   * 角色对象
+   */
+  roles?: RoleDTO[];
+  /**
+   * 租户ID
+   */
+  tenantId?: string;
+  /**
+   * 用户唯一标识
+   */
+  token?: string;
+  /**
+   * 用户ID
+   */
+  userId?: number;
+  /**
+   * 用户名
+   */
+  username?: string;
+  /**
+   * 用户类型
+   */
+  userType?: string;
+}
+
+/**
+ * RoleDTO，角色
+ */
+export interface RoleDTO {
+  /**
+   * 数据范围（1：所有数据权限；2：自定义数据权限；3：本部门数据权限；4：本部门及以下数据权限；5：仅本人数据权限）
+   */
+  dataScope?: string;
+  /**
+   * 角色ID
+   */
+  roleId?: number;
+  /**
+   * 角色权限
+   */
+  roleKey?: string;
+  /**
+   * 角色名称
+   */
+  roleName?: string;
+}

src/main.ts

@@ -1,10 +1,15 @@
+import { ElMessage } from 'element-plus';
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
+import store from './store';
 import './styles/index.scss';
 import 'virtual:uno.css';
+import 'element-plus/dist/index.css';
 
 const app = createApp(App);
 app.use(router);
+app.use(ElMessage);
+app.use(store);
 
 app.mount('#app');

src/pages/login/index.vue

@@ -2,7 +2,11 @@
 import type { LoginDTO } from '@/api/auth/types';
 import type { FormInstance } from 'element-plus';
 import { login } from '@/api';
+import { useUserStore } from '@/store';
 import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const userStore = useUserStore();
 
 const formRef = ref<FormInstance>();
 
@@ -10,11 +14,16 @@ const formModel = reactive<LoginDTO>({
   username: '',
   password: '',
 });
+
+const router = useRouter();
 async function handleSubmit() {
   try {
     await formRef.value?.validate();
-    const _res = await login(formModel);
-    console.log(_res, 'res');
+    const res = await login(formModel);
+    console.log(res, 'res');
+    res.data.token && userStore.setToken(res.data.token);
+    res.data.userInfo && userStore.setUserInfo(res.data.userInfo);
+    router.replace('/');
   }
   catch (error) {
     console.error('请求错误:', error);

src/router/index.ts

@@ -1,11 +1,21 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
+import {
+  createRouter,
+  createWebHashHistory,
+
+} from 'vue-router';
 import { jwtGuard } from './permissions';
 
-const routes = [
+const routes: Readonly<RouteRecordRaw>[] = [
   {
     path: '/',
     component: () => import('@/layout/index.vue'),
     children: [
+      {
+        path: '',
+        name: 'chatWithoutId',
+        component: () => import('@/pages/chat/index.vue'),
+      },
       {
         path: ':id',
         name: 'chat',
@@ -18,7 +28,7 @@ const routes = [
     name: 'login',
     component: () => import('@/pages/login/index.vue'),
   },
-];
+] as const;
 
 const router = createRouter({
   history: createWebHashHistory(),

src/store/index.ts

@@ -0,0 +1,10 @@
+import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+
+const store = createPinia();
+
+store.use(piniaPluginPersistedstate);
+
+export default store;
+
+export * from './modules/user';

src/store/modules/user.ts

@@ -0,0 +1,42 @@
+import type { LoginUser } from '@/api/auth/types';
+import { defineStore } from 'pinia';
+
+export const useUserStore = defineStore(
+  'user',
+  () => {
+    const token = ref<string>();
+    const setToken = (value: string) => {
+      token.value = value;
+    };
+    const clearToken = () => {
+      token.value = void 0;
+    };
+
+    const userInfo = ref<LoginUser>();
+    const setUserInfo = (value: LoginUser) => {
+      userInfo.value = value;
+    };
+    const clearUserInfo = () => {
+      userInfo.value = void 0;
+    };
+
+    const logout = () => {
+      // 如果需要调用接口，可以在这里调用
+      clearToken();
+      clearUserInfo();
+    };
+
+    return {
+      token,
+      setToken,
+      clearToken,
+      userInfo,
+      setUserInfo,
+      clearUserInfo,
+      logout,
+    };
+  },
+  {
+    persist: true,
+  },
+);

src/utils/request.ts

@@ -1,4 +1,5 @@
 import type { HookFetchPlugin } from 'hook-fetch';
+import { ElMessage } from 'element-plus';
 import hookFetch from 'hook-fetch';
 import { sseTextDecoderPlugin } from 'hook-fetch/plugins';
 
@@ -8,7 +9,7 @@ interface BaseResponse {
   msg: string;
 }
 
-const instance = hookFetch.create<BaseResponse, unknown, 'data'>({
+export const request = hookFetch.create<BaseResponse, 'data'>({
   baseURL: 'https://web.pandarobot.chat/api',
   headers: {
     'Content-Type': 'application/json',
@@ -24,18 +25,16 @@ function jwtPlugin(): HookFetchPlugin<BaseResponse> {
       if (response.result?.code === 200) {
         return response;
       }
-      // alert(response.result?.msg);
+      ElMessage.error(response.result?.msg);
       return Promise.reject(response);
     },
   };
 }
 
-instance.use(jwtPlugin());
+request.use(jwtPlugin());
 
-export const request = instance.request;
+export const post = request.post;
 
-export const post = instance.post;
+export const get = request.get;
 
-export const get = instance.get;
-
-export default instance;
+export default request;