后端接口中的菜单数据
在登录接口中，我将得到的菜单数据构造成了树形结构保存在用户数据redis中。user里有菜单树形结构数据。
具体构造树形结构的方法也很简单，请看：
public List<SysMenu> generateMenuTree(List<SysMenu> list) { Map<Long, SysMenu> map = new HashMap<>(); List<SysMenu> roots = new ArrayList<>(); // 首先将所有菜单存入Map中，便于后续查找 for (SysMenu menu : list) { map.put(menu.getMenuId(), menu); } // 然后遍历列表，构建树形结构 for (SysMenu menu : list) { SysMenu parent = map.get(menu.getParentId()); if (parent == null) { // 根节点直接加入roots roots.add(menu); } else { // 非根节点添加到其父节点的children中 parent.getChildren().add(menu); } } return roots;}
另开一个接口，根据token得到存入redis中的用户数据
/ 获取用户信息 @return 用户信息 /@GetMapping("/getInfo")public AjaxResult getInfo() { SysUser user = tokenService.getLoginUserFromRequest(); user.setPassword(null); return AjaxResult.success(user);}前端使用
我们把得到的用户数据放在pinia中（相当于vue2的vue-store），而每次刷新浏览器时，pinia中的数据会被清理掉，所以我这里是在路由守卫中调用getInfo接口的。initUserInfo
router.beforeEach((to, from, next) => { document.title = Properties.VITE_TITLE const token = getToken() if(token){ // 若有token //1、更新过期时间 setToken(token) if (to.path === '/login') { next({ path: '/' }) }else { //2、若pinia中有用户数据（也就是路由） const userInfoStore = useUserInfoStore() let {user, initUserInfo} = userInfoStore if(user){ next() }else { initUserInfo().then((data:any) => { constructDynamicRoute(data.menus) // 如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由 next({ ...to, replace: true }) }).catch(() => {}) } } }else { // 若没有token，则跳转到登录页 if(whiteList.indexOf(to.path) !== -1){ next() }else { next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) } }})构造动态路由constructDynamicRoute
递归循环添加路由数据到router中
function constructDynamicRoute(menus) { menus.forEach((menu) => { if(menu.children && menu.children.length > 0){ constructDynamicRoute(menu.children) } if(menu.component){ router.addRoute('/index', { path: menu.path, //@符号是不行的 component: () => import('../views' + menu.component/ @vite-ignore /), meta: { title: menu.menuName } }); } });}END
有了动态路由，还缺动态菜单，下一步咱们再根据pinia中的路由数据构造左侧菜单结构树，使用的是elementplus。
