geeker admin 动态路由

0 环境

1 文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

2 前言

在登录事件中有两个重点关注点:await initDynamicRouter()router.push(HOME_URL) 。前一个是添加动态路由,一般是从后端获取数据,然后通过initDynamicRouter() ,生成动态路由。当然你的项目全是静态路由,去掉 initDynamicRouter() 即可。这里的 router.push(HOME_URL) 是在它跳转前会再次被路由拦截的。下面的内容介绍的是动态路由,已经理解的朋友,可以不用往下看了。

3 动态加载路由(initDynamicRouter)

找到src/views/login/components/LoginForm.vue ,搜索login方法 ,懒的搜索的,可以定位到76行那个位置。进入initDynamicRouter(),核心代码如下:

1 清楚获取菜单列表 && 按钮权限列表的过程

先看initDynamicRouter ,首先这里的PROT1 单独抽出来的前缀,它对应的是/geeker,也就是mock的模拟数据,若是你想用自己的后端,改PROT1 就行,方便我们修改。authStore.getAuthMenuListauthStore.getAuthButtonList ,点进去会发现两个http get请求, 分别是 /menu/list/auth/buttons ,先定位到src/assets/mock/geeker/ ,分别找到menu/list.jsonauth/buttons.json

js 复制代码
// 获取菜单列表
export const getAuthMenuListApi = () => {
  return http.get<Menu.MenuOptions[]>(PORT1 + `/menu/list`, {}, { loading: false });
  // 如果想让菜单变为本地数据,注释上一行代码,并引入本地 authMenuList.json 数据
  return authMenuList;
};

// 获取按钮权限
export const getAuthButtonListApi = () => {
  return http.get<Login.ResAuthButtons>(PORT1 + `/auth/buttons`, {}, { loading: false });
  // 如果想让按钮权限变为本地数据,注释上一行代码,并引入本地 authButtonList.json 数据
  return authButtonList;
};

先看menu/list.json 。如下图所示:代码实在太长了,我精简了一下,这里先获取header里的x-access-token,然后进行判断token的判断,假如判断通过了,返回数组对象。这里重点是数组对象,仔细看这两个对象,第一个对象没有children,而第二个对象中有children,它里面有嵌套路由对象。

它的意义在哪里,先登录进入到首页,会看到侧边栏,如下图我标记的两个位置。当然它也是加载路由的原材料,这里先有个概念,之后会详细说明的。

这里 auth/buttons.json比较简单,不同token,对应着不同的按钮权限。

json 复制代码
{
  "code": 200,
  "data": function({
    _req
  }) {
    let header = _req.header;
    if (header['x-access-token'] === 'bqddxxwqmfncffacvbpkuxvwvqrhln') {
      return {
        "useProTable": ["add", "batchAdd", "export", "batchDelete", "status"],
        "authButton": ["add", "edit", "delete", "import", "export"]
      }
    }
    if (header['x-access-token'] === 'unufvdotdqxuzfbdygovfmsbftlvbn') {
      return {
        "useProTable": ["add", "batchDelete"],
        "authButton": ["add", "edit", "delete", "import", "export"]
      }
    }
  },
  "msg": "成功"
}

2 判断当前用户有没有菜单权限

这里的 authStore.authMenuListGet 是拿到menu/list.json 里的return里的返回值。结合下图和authMenuListGet: state => state.authMenuList

若是菜单权限列表为空,给它个提示,并且清空token,跳到登录页,并且返回了promise,注意了:initDynamicRouter方法里是有异常捕获处理和promise抛出的。中断login后续的操作,不过我看作者也没有用catch捕获它,有其他操作的,可以自行捕获。

3 添加动态路由

有菜单权限列表了,然后就可以添加动态路由了,authStore.flatMenuListGetgetFlatMenuList方法authMenuList 里的数组里每个对象以及它里面有的有children的,全部转成一维数组菜单。方法如下:getFlatMenuList() 先是深拷贝了,然后利用flatMap(flatmap ---> [[{xxx}], [{xxx},{xxx}]] --> [{xxx}....{xxx}])遇到有children的递归 + 展开,将最终的结果展开成一维数组。

js 复制代码
interface MenuOptions {
  path: string;
  name: string;
  component?: string | (() => Promise<unknown>);
  redirect?: string;
  meta: MetaProps;
  children?: MenuOptions[];
}

export function getFlatMenuList(menuList: Menu.MenuOptions[]): Menu.MenuOptions[] {
  let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList));
  return newMenuList.flatMap(item => [item, ...(item.children ? getFlatMenuList(item.children) : [])]);
}

如下图:由于菜单权限列表是一维数组了,所以children就不需要了,有则删之。然后就是item.component 的拼接(这里借助import.meta.glob ),回忆一下router静态路由里的component组件 是不是很像,其实就是它老。若是全屏,就直接加入到路由中,否则添加到layout中。

layout 效果图如下。至于它和侧边栏如何配合使用的,等后续有缘的。

4 流程图

流程图

5 总结

主要是为了得到菜单权限列表和加载组件到路由中去,以达到动态的效果。很多细节的判断啥的,不理解无妨,大概知道做了啥就行,毕竟这里基本是固定的。

相关推荐
吞掉星星的鲸鱼12 分钟前
使用高德api实现天气查询
前端·javascript·css
....49216 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
TDengine (老段)4 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
難釋懷7 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠8 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机8 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
bst@微胖子8 小时前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
拉不动的猪8 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试