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

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;
   });

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,9 +87,8 @@ export const useProjectSettingStore = defineStore({
     },
   },
   actions: {
-    async setProjectSetting() {
+    async setProjectSetting(data: any) {
       const useDesignSettingStore = useDesignSetting();
-      const { data } = await getUserStyleSetting();
       this.navMode = data.navMode ?? 'vertical';
       this.navTheme = data.navTheme ?? 'light';
       this.isMobile = data.isMobile ?? false;

src/store/modules/user.ts

@@ -12,14 +12,17 @@ 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;
@@ -30,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, {}),
@@ -56,32 +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.getInfo();
         const asyncRouteStore = useAsyncRoute();
-        const useProjectSettingStore = useProjectSetting();
         const routes = await asyncRouteStore.generateRoutes();
-        await useProjectSettingStore.setProjectSetting();
-        // 动态添加可访问路由表
+        // 动态添加可访问路由表;
         routes.forEach((item: unknown) => {
           router.addRoute(item as unknown as RouteRecordRaw);
         });
-        // this.setUserInfo(result);
       }
       return res;
     },
@@ -89,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;
@@ -98,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/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>