项目框架搭建--动态路由

.env

 # spa-title
-VITE_GLOB_APP_TITLE = Vben Admin
+VITE_GLOB_APP_TITLE = 智能快速开发平台

src/enums/pageEnum.ts

@@ -2,7 +2,7 @@ export enum PageEnum {
   // basic login path
   BASE_LOGIN = '/login',
   // basic home path
-  BASE_HOME = '/dashboard',
+  BASE_HOME = '/system/user',
   // error page path
   ERROR_PAGE = '/exception',
   // error log page path

src/layouts/default/header/components/UpgradePrompt.vue

@@ -7,17 +7,17 @@
 
   const localKey = 'vben-v5.0.0-upgrade-prompt';
 
-  if (!localStorage.getItem(localKey)) {
-    Modal.confirm({
-      title: t('layout.header.upgrade-prompt.title'),
-      content: h('div', {}, [h('p', t('layout.header.upgrade-prompt.content'))]),
-      onOk() {
-        handleClick();
-      },
-      okText: t('layout.header.upgrade-prompt.ok-text'),
-      cancelText: t('common.closeText'),
-    });
-  }
+  // if (!localStorage.getItem(localKey)) {
+  //   Modal.confirm({
+  //     title: t('layout.header.upgrade-prompt.title'),
+  //     content: h('div', {}, [h('p', t('layout.header.upgrade-prompt.content'))]),
+  //     onOk() {
+  //       handleClick();
+  //     },
+  //     okText: t('layout.header.upgrade-prompt.ok-text'),
+  //     cancelText: t('common.closeText'),
+  //   });
+  // }
   localStorage.setItem(localKey, String(Date.now()));
 
   function handleClick() {

src/settings/projectSetting.ts

@@ -37,7 +37,7 @@ const setting: ProjectConfig = {
   // 权限模式,默认前端角色权限模式
   // ROUTE_MAPPING: 前端模式（菜单由路由生成，默认）
   // ROLE：前端模式（菜单路由分开）
-  permissionMode: PermissionModeEnum.ROUTE_MAPPING,
+  permissionMode: PermissionModeEnum.BACK,
 
   // Permission-related cache is stored in sessionStorage or localStorage
   // 权限缓存存放位置。默认存放于localStorage

src/store/modules/permission.ts

@@ -236,13 +236,15 @@ export const usePermissionStore = defineStore({
           // this function may only need to be executed once, and the actual project can be put at the right time by itself
           // 这个功能可能只需要执行一次，实际项目可以自己放在合适的时间
           let routeList: AppRouteRecordRaw[] = [];
-          try {
-            await this.changePermissionCode();
-            routeList = (await getMenuList()) as AppRouteRecordRaw[];
-          } catch (error) {
-            console.error(error);
-          }
-
+          // try {
+          //   await this.changePermissionCode();
+          //   routeList = (await getMenuList()) as AppRouteRecordRaw[];
+          // } catch (error) {
+          //   console.error(error);
+          // }
+          console.log('userStore.getUserInfo.data.menus',userStore.getUserInfo.data.menus)
+          routeList = userStore.getUserInfo.data.menus
+          console.log('routeList',routeList)
           // Dynamically introduce components
           // 动态引入组件
           routeList = transformObjToRoute(routeList);

src/store/modules/user.ts

@@ -61,7 +61,8 @@ export const useUserStore = defineStore({
       this.token = info ? info : ''; // for null or undefined value
       setAuthCache(TOKEN_KEY, info);
     },
-    setRoleList(roleList: RoleEnum[]) {
+    // setRoleList(roleList: RoleEnum[]) {
+    setRoleList(roleList: any) {
       this.roleList = roleList;
       setAuthCache(ROLES_KEY, roleList);
     },
@@ -90,9 +91,10 @@ export const useUserStore = defineStore({
     ): Promise<any | null> {
       try {
         const { goHome = true, mode, ...loginParams } = params;
+        // 1、调用登录接口
         const data = await loginApi(loginParams, mode);
         const token = data.data;
-        // 存储token
+        // 2、设置 token，并存储本地缓存。
         this.setToken(token);
         return this.afterLoginAction(goHome);
       } catch (error) {
@@ -101,17 +103,17 @@ export const useUserStore = defineStore({
     },
     async afterLoginAction(goHome?: boolean): Promise<any | null> {
       if (!this.getToken) return null;
-      // get user info
+      // 3、获取用户信息
       const userInfo = await this.getUserInfoAction();
-
+      console.log('userInfo',userInfo)
       const sessionTimeout = this.sessionTimeout;
       if (sessionTimeout) {
         this.setSessionTimeout(false);
       } else {
         const permissionStore = usePermissionStore();
-
         // 动态路由加载（首次）
         if (!permissionStore.isDynamicAddedRoute) {
+          // 4、获取路由配置并动态添加路由配置
           const routes = await permissionStore.buildRoutesAction();
           [...routes, PAGE_NOT_FOUND_ROUTE].forEach((route) => {
             router.addRoute(route as unknown as RouteRecordRaw);
@@ -127,15 +129,12 @@ export const useUserStore = defineStore({
     async getUserInfoAction(): Promise<UserInfo | null> {
       if (!this.getToken) return null;
       const userInfo = await getUserInfo();
-      console.log('userInfo',userInfo)
-      const { roles = [] } = userInfo;
-      if (isArray(roles)) {
-        const roleList = roles.map((item) => item.value) as RoleEnum[];
-        this.setRoleList(roleList);
+      if (userInfo.data.roles && userInfo.data.roles.length > 0) {
+        this.setRoleList(userInfo.data.roles);
       } else {
-        userInfo.roles = [];
-        this.setRoleList([]);
+        this.setRoleList(['ROLE_DEFAULT']);
       }
+      // 设置用户信息，并存储本地缓存
       this.setUserInfo(userInfo);
       return userInfo;
     },

src/views/sys/login/LoginForm.vue

@@ -139,10 +139,11 @@
         username: data.account,
         mode: 'none', //不要默认的错误提示
       });
+      console.log('11111111111111',userInfo)
       if (userInfo) {
         notification.success({
           message: t('sys.login.loginSuccessTitle'),
-          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
+          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.data.user.name}`,
           duration: 3,
         });
       }

src/views/system/user/index.vue

+<template>
+<div>
+  用戶管理
+</div>
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

types/store.d.ts

@@ -36,13 +36,10 @@ export interface ErrorLogInfo {
 }
 
 export interface UserInfo {
-  userId: string | number;
-  username: string;
-  realName: string;
-  avatar: string;
-  desc?: string;
-  homePath?: string;
-  roles: RoleInfo[];
+  menus: [];
+  permissions: [];
+  roles: [];
+  user: [];
 }
 
 export interface BeforeMiniState {

vite.config.ts

@@ -17,7 +17,9 @@ export default defineApplicationConfig({
     server: {
       proxy: {
         '/basic-api': {
-          target: 'http://localhost:3000',
+          // target: 'http://localhost:3000',
+          target: 'http://106.3.97.198:20062/',
+          // target: `http://192.168.0.9:8082/`,
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp(`^/basic-api`), ''),