fix: 🐛 退出重定向BUG,用户配置角色回显问题

src/api/system/menu.ts

@@ -5,6 +5,7 @@ const fix = '/menu';
 const url = {
   insert: `${fix}/insert`, // 分页查询
   tree: `${fix}/tree`, // 查询菜单
+  treeAll: `${fix}/treeAll`, // 查询所有菜单
   update: `${fix}/update`, // 修改菜单
   delete: `${fix}/delete`, // 删除菜单
 };
@@ -16,6 +17,9 @@ export const insertMenu = (params: Object) => {
 export const getMenuTree = (params?: any) => {
   return get(url.tree, params);
 };
+export const getMenuTreeAll = (params?: any) => {
+  return get(url.treeAll, params);
+};
 
 export const updateMenu = (params: Object) => {
   return post(url.update, params);

src/api/system/role.ts

@@ -7,6 +7,7 @@ const url = {
   page: `${fix}/page`,
   update: `${fix}/update`,
   delete: `${fix}/delete`,
+  userRole: `/userRole/getRoles`,
 };
 
 export const insertRule = (params: Object) => {
@@ -20,6 +21,11 @@ export const getRuleList = (params: Object) => {
 export const updateRule = (params: Object) => {
   return post(url.update, params);
 };
+
 export const deleteRule = (params: Object) => {
   return post(url.delete, params);
 };
+
+export const getUserRole = (params: Object) => {
+  return get(url.userRole, params);
+};

src/layout/components/Header/index.vue

@@ -149,6 +149,8 @@ import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 import { websiteConfig } from '@/config/website.config';
 import { zsDialog } from '@/utils';
 import { DialogEnum } from '@/enums/pluginEnum';
+import { PageEnum } from '@/enums/pageEnum';
+
 export default defineComponent({
   name: 'PageHeader',
   components: { ...components, ProjectSetting, AsideMenu },
@@ -166,12 +168,12 @@ export default defineComponent({
     const { navMode, navTheme, headerSetting, menuSetting, crumbsSetting } =
       useProjectSetting();
 
-    const { name } = userStore?.info || {};
+    const { realname } = userStore?.info || {};
 
     const drawerSetting = ref();
 
     const state = reactive({
-      username: name ?? '',
+      username: realname ?? '',
       fullscreenIcon: 'FullscreenOutlined',
       navMode,
       navTheme,
@@ -252,7 +254,7 @@ export default defineComponent({
             localStorage.removeItem(StorageEnum.ZS_TABS_ROUTES);
             router
               .replace({
-                name: 'Login',
+                name: PageEnum.BASE_LOGIN_NAME,
                 query: {
                   redirect: route.fullPath,
                 },
@@ -260,7 +262,6 @@ export default defineComponent({
               .finally(() => location.reload());
           });
         },
-        onNegativeClick: () => {},
       });
     };
 

src/layout/components/TagsView/index.vue

@@ -120,7 +120,7 @@ import {
   RightOutlined,
 } from '@vicons/antd';
 import { renderIcon } from '@/utils';
-// import elementResizeDetectorMaker from 'element-resize-detector';
+import elementResizeDetectorMaker from 'element-resize-detector';
 import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
 import { useProjectSettingStore } from '@/store/modules/projectSetting';
 import { useThemeVars } from 'naive-ui';
@@ -510,14 +510,14 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      // onElementResize();
+      onElementResize();
     });
 
-    // function onElementResize() {
-    //   let observer;
-    //   observer = elementResizeDetectorMaker();
-    //   observer.listenTo(navWrap.value, handleResize);
-    // }
+    function onElementResize() {
+      let observer;
+      observer = elementResizeDetectorMaker();
+      observer.listenTo(navWrap.value, handleResize);
+    }
 
     return {
       ...toRefs(state),

src/router/generator.ts

@@ -47,9 +47,10 @@ export const generateRoutes = (routerMap, parent?): any[] => {
       !item.redirect &&
         (currentRoute.redirect = `${item.path}/${item.children[0].path}`);
       // Recursion
-      console.log(currentRoute.redirect, 'currentRoute.redirect');
 
       currentRoute.children = generateRoutes(item.children, currentRoute);
+      // currentRoute.redirect = `${item.path}/${item.children[0].path}`;
+      // console.log(currentRoute.redirect, 'currentRoute.redirect');
     }
     return currentRoute;
   });
@@ -60,7 +61,7 @@ export const generateRoutes = (routerMap, parent?): any[] => {
  * @returns {Promise<Router>}
  */
 export const generateDynamicRoutes = async (): Promise<RouteRecordRaw[]> => {
-  const { data } = await getMenuTree({ mode: 1 });
+  const { data } = await getMenuTree();
   const router = generateRoutes(data);
   asyncImportRoute(router);
   return router;

src/router/index.ts

@@ -26,18 +26,11 @@ export const RootRoute: RouteRecordRaw = {
   path: '/',
   name: 'Root',
   redirect: '/system/menu',
-  // async beforeEnter(to, from, next) {
-  //   next(await reqRedirectUrl());
-  // },
   meta: {
     title: 'Root',
   },
 };
 
-// async function reqRedirectUrl() {
-//   return "/system/role";
-// }
-
 //需要验证权限
 export const asyncRoutes = [];
 

src/router/router-guards.ts

@@ -6,6 +6,7 @@ import { useAsyncRoute } from '@/store/modules/asyncRoute';
 import { PageEnum } from '@/enums/pageEnum';
 import { ErrorPageRoute } from '@/router/base';
 import { useProjectSetting } from '@/store/modules/projectSetting';
+import { getUserStyleSetting } from '@/api/system/user';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 const whitePathList = [LOGIN_PATH]; // 没有重定向白名单
@@ -63,7 +64,6 @@ export async function createRouterGuards(router: Router) {
 
     try {
       await userStore.getInfo();
-      await useProjectSettingStore.setProjectSetting();
       const routes = await asyncRouteStore.generateRoutes();
       // 动态添加可访问路由表
       routes.forEach((item: unknown) => {

src/store/modules/projectSetting.ts

@@ -7,7 +7,6 @@ import type {
   IMultiTabsSetting,
   ICrumbsSetting,
 } from '/#/config';
-import { getUserStyleSetting } from '@/api/system/user';
 import { useDesignSetting } from './designSetting';
 const {
   navMode,
@@ -88,21 +87,38 @@ export const useProjectSettingStore = defineStore({
     },
   },
   actions: {
-    async setProjectSetting() {
+    async setProjectSetting(data: any) {
       const useDesignSettingStore = useDesignSetting();
-      const { data } = await getUserStyleSetting();
-      this.navMode = data.navMode;
-      this.navTheme = data.navTheme;
-      this.isMobile = data.isMobile;
-      this.headerSetting = data.headerSetting;
-      this.showFooter = data.showFooter;
-      this.menuSetting = data.menuSetting;
-      this.multiTabsSetting = data.multiTabsSetting;
-      this.crumbsSetting = data.crumbsSetting;
-      this.isPageAnimate = data.isPageAnimate;
-      this.pageAnimateType = data.pageAnimateType;
+      this.navMode = data.navMode ?? 'vertical';
+      this.navTheme = data.navTheme ?? 'light';
+      this.isMobile = data.isMobile ?? false;
+      this.headerSetting = data.headerSetting ?? {
+        bgColor: '#fff',
+        fixed: true,
+        isReload: true,
+      };
+      this.showFooter = data.showFooter ?? true;
+      this.menuSetting = data.menuSetting ?? {
+        minMenuWidth: 64,
+        menuWidth: 200,
+        fixed: true,
+        mixMenu: false,
+        mobileWidth: 800,
+        collapsed: false,
+      };
+      this.multiTabsSetting = data.multiTabsSetting ?? {
+        bgColor: '#fff',
+        show: true,
+        fixed: true,
+      };
+      this.crumbsSetting = data.crumbsSetting ?? {
+        show: true,
+        showIcon: false,
+      };
+      this.isPageAnimate = data.isPageAnimate ?? true;
+      this.pageAnimateType = data.pageAnimateType ?? 'fade-bottom';
 
-      useDesignSettingStore.setAppTheme(data.appTheme);
+      useDesignSettingStore.setAppTheme(data.appTheme ?? '#2d8cf0');
     },
 
     setIsMobile(value: boolean): void {

src/store/modules/user.ts

@@ -1,20 +1,28 @@
 import { defineStore } from 'pinia';
 import { store } from '@/store';
+import { useAsyncRoute } from '@/store/modules/asyncRoute';
 import { StorageEnum } from '@/enums/storageEnum';
 import { ResultEnum } from '@/enums/httpEnum';
 import { storage, routerTurnByName } from '@/utils';
 import { login, getUserInfo } from '@/api/system/user';
 import { PageEnum } from '@/enums/pageEnum';
+import router from '@/router';
+import type { RouteRecordRaw } from 'vue-router';
+import { useProjectSetting } from '@/store/modules/projectSetting';
+
 export type UserInfoType = {
   // TODO: add your own data
-  name: string;
+  realname: string;
   email: string;
+  token: string;
+  menuTree: any[];
+  userStyleSetting: object;
+  userId: number;
 };
 
 export interface IUserState {
   token: string;
   username: string;
-  welcome: string;
   avatar: string;
   permissions: any[];
   info: UserInfoType;
@@ -25,7 +33,6 @@ export const useUserStore = defineStore({
   state: (): IUserState => ({
     token: storage.get(StorageEnum.ZS_ACCESS_TOKEN, ''),
     username: '',
-    welcome: '',
     avatar: '',
     permissions: [],
     info: storage.get(StorageEnum.ZS_CURRENT_USER, {}),
@@ -51,24 +58,32 @@ export const useUserStore = defineStore({
     setToken(token: string) {
       this.token = token;
     },
-    setAvatar(avatar: string) {
-      this.avatar = avatar;
-    },
-    setPermissions(permissions) {
-      this.permissions = permissions;
-    },
-    setUserInfo(info: UserInfoType) {
+
+    // setPermissions(permissions) {
+    //   this.permissions = permissions;
+    // },
+
+    async setUserInfo(info: UserInfoType) {
       this.info = info;
+      const useProjectSettingStore = useProjectSetting();
+      useProjectSettingStore.setProjectSetting(info.userStyleSetting);
     },
+
     // 登录
-    async login(params: any) {
+    async login(params: { username: string; password: string }) {
       const res = await login(params);
       const { data } = res;
       if (res.status === ResultEnum.STATUS) {
         const ex = 7 * 24 * 60 * 60;
         storage.set(StorageEnum.ZS_ACCESS_TOKEN, data, ex);
         this.setToken(data);
-        // this.setUserInfo(result);
+        this.getInfo();
+        const asyncRouteStore = useAsyncRoute();
+        const routes = await asyncRouteStore.generateRoutes();
+        // 动态添加可访问路由表;
+        routes.forEach((item: unknown) => {
+          router.addRoute(item as unknown as RouteRecordRaw);
+        });
       }
       return res;
     },
@@ -76,7 +91,6 @@ export const useUserStore = defineStore({
     // 获取用户信息
     async getInfo() {
       const { data } = await getUserInfo();
-      console.log(data, '用户信息');
 
       // if (result.permissions && result.permissions.length) {
       // const permissionsList = result.permissions;
@@ -85,14 +99,20 @@ export const useUserStore = defineStore({
       // } else {
       //   throw new Error("getInfo: permissionsList must be a non-null array !");
       // }
-      this.setAvatar(data.avatar);
       return data;
     },
 
     // 登出
     async logout() {
-      this.setPermissions([]);
-      this.setUserInfo({ name: '', email: '' });
+      // this.setPermissions([]);
+      this.setUserInfo({
+        realname: '',
+        email: '',
+        token: '',
+        menuTree: [],
+        userStyleSetting: {},
+        userId: null as any,
+      });
       storage.remove(StorageEnum.ZS_ACCESS_TOKEN);
       storage.remove(StorageEnum.ZS_CURRENT_USER);
       routerTurnByName(PageEnum.BASE_LOGIN_NAME);

src/views/system/menu/menu.vue

@@ -236,7 +236,7 @@ import {
 } from '@vicons/antd';
 import { getTreeItem } from '@/utils';
 import CreateDrawer from './CreateDrawer.vue';
-import { getMenuTree, updateMenu, deleteMenu } from '@/api/system/menu';
+import { getMenuTreeAll, updateMenu, deleteMenu } from '@/api/system/menu';
 interface TreeNode {
   key: string;
   children?: TreeNode[];
@@ -395,7 +395,7 @@ const getKeys = (data: TreeNode[]): string[] => {
 const getMenuTreeApi = async () => {
   try {
     loading.value = true;
-    const treeMenuList = await getMenuTree();
+    const treeMenuList = await getMenuTreeAll();
     const res = mapTreeData(treeMenuList.data);
 
     Object.assign(formParams, getKeys(res));

src/views/system/role/role.vue

@@ -83,7 +83,7 @@ import { columns } from './columns';
 import { PlusOutlined } from '@vicons/antd';
 import { getTreeAll } from '@/utils';
 import { getRuleList } from '@/api/system/role';
-import { getMenuTree } from '@/api/system/menu';
+import { getMenuTreeAll } from '@/api/system/menu';
 import { queryMenuByRole, saveRoleMenu } from '@/api/system/roleMenu';
 
 const actionRef = ref();
@@ -237,7 +237,7 @@ function checkedAllHandle() {
 }
 
 onMounted(async () => {
-  const treeMenuList = await getMenuTree();
+  const treeMenuList = await getMenuTreeAll();
   const res = mapTreeData(treeMenuList.data);
   expandedKeys.value = treeMenuList.data.map((item) => item.key);
   treeData.value = res;

src/views/system/user/user.vue

@@ -90,9 +90,11 @@ import { BasicTable, TableAction } from '@/components/Table';
 
 import { columns } from './columns';
 import { PlusOutlined } from '@vicons/antd';
-import { getUserList, updateUser } from '@/api/system/user';
-import { getRuleList } from '@/api/system/role';
+import { getUserList, updateUser, deleteUser } from '@/api/system/user';
+import { getRuleList, getUserRole } from '@/api/system/role';
 import { saveUserRole } from '@/api/system/userrole';
+import { zsDialog } from '@/utils';
+import { DialogEnum } from '@/enums/pluginEnum';
 const actionRef = ref();
 const formRef = ref();
 const formRole = ref();
@@ -104,7 +106,7 @@ const rules = {
   //   trigger: ["blur", "change"],
   // },
 };
-const roleIds = ref([]);
+
 const formRoleValue = reactive({
   id: null,
   username: '',
@@ -211,16 +213,34 @@ function handleEdit(record: Recordable) {
   formRole.value.init('edit');
 }
 
-function handleDelete(record: Recordable) {}
+async function handleDelete(record: Recordable) {
+  zsDialog({
+    type: DialogEnum.ERROR,
+    message: `您确定要删除 ${record.username} 用户吗?`,
+    positiveButtonProps: { type: 'primary', ghost: false },
+    onPositiveCallback: async () => {
+      const data = await deleteUser({ id: record.id });
+      if (data.status === 200) reloadTable();
+      window['$message'].success('删除成功');
+    },
+  });
+}
 
 async function handleMenuAuth(record: Recordable) {
+  const { data } = await getUserRole({ userId: record.id });
+  formRoleValue.roleIds = data;
+
   editRoleTitle.value = `分配 ${record.realname} 的角色权限`;
   Object.assign(formRoleValue, record);
   showModal.value = true;
 }
 
-onMounted(async () => {
+const getRuleListApi = async () => {
   const { data } = await getRuleList({ current: 1, size: 100 });
   roleOptions.value = data.records;
+};
+
+onMounted(() => {
+  getRuleListApi();
 });
 </script>