分享一个在前后端分离的管理后台项目中,如何方便的由后端来配置 Vue Router 的方案

能做到的

  • (重要)几乎完全由后端控制的 Vue Router 配置,为什么是几乎,后面会说。
  • (基本操作)根据路由配置,自动生成菜单和面包屑导航,理论支持无限级嵌套。
  • (还可以)理论任意层次的页面,都可以缓存,由后端设置是否缓存。(发现缓存有个 bug,暂时改掉了)

使用

后端配置路由:

表:

这里是这篇文章唯一跟 Laravel 相关的地方,,,所以勉强算是 Laravel 相关的内容吧。

分享一个在前后端分离的管理后台项目中,处理 Vue 的路由配置的方案

后台使用:

分享一个在前后端分离的管理后台项目中,如何方便的由后端来配置 Vue Router 的方案

前端稍微配合下:

分享一个在前后端分离的管理后台项目中,处理 Vue 的路由配置的方案

为什么前面说,几乎由后端控制,因为为了路由组件的懒加载和代码分块。我尝试过这里用 require.context 来批量注册,但是 import() 中,如果有变量的话,webpack 打包阶段,是不会去解析的,所以无效。

当然,如果不需要懒加载和代码分块,是可以直接按照某个约定好的 { path: Component } 映射,来批量注册组件的,那路由配置,就是完全后端控制了。

所以,完全后端控制的路由配置,有什么好处?

哪些菜单需要显示,肯定都是要经过权限过滤的,如果路由配置在前端写死,那修改菜单的权限,就只能修改前端,改个权限还得重新打包,,,接受不了。。。可以看看 iview adminelement admin 中,都是前端写死路由和权限。

现在,只需要在后端路由配置中,修改路由关联的角色或者权限,刷新下页面,相应的路由就有了或者没了,,对应的菜单也是。

说了这么多,东西呢?

http://admin-demo.largezhou.cn/admin/vue-r...

账号:admin

密码:000000

可以随意体验,搞坏了,登录不了,可点 重置,,,,

修改了路由配置,要刷新页面,用导航栏上的刷新也不行,,

更好的方案

如果大家有更好的方案,,,,我特么马上就重写!!!

附言 1  ·  1周前
本帖由系统于 1周前 自动加精
largezhou
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 21

666

1周前 评论

很赞 正准备使用这个功能

1周前 评论

老司机带带我

1周前 评论

这跟后端返回左侧菜单栏不是一样的吗?只要是没catch到的页面统统进404呀

1周前 评论
largezhou: 是啊,,, 1周前
legendary_jesse: 哈哈哈 1周前

代码质量很高 :100:

1周前 评论
largezhou: 也不知道好不好,反正自己写的玩的,又没人催,,慢慢写 1周前
全场我最姜姜姜丶

我们公司后端只配置接口路径,然后前段根据接口去匹配哪些页面要显示,哪个按钮要显示。不需要配置路由列表,因为你配置了列表,结果他没有这个接口权限,也很麻烦。相当于要去匹配2遍

1周前 评论
largezhou: 没太懂你说的这个方案,有兴趣可以具体说说? 1周前
全场我最姜姜姜丶: 我这方案对前段要求高,我们后端配置权限就是接口路由,用户一登录,后台就返回用户所拥有的接口,然后前端去匹配是列表呢,还是按钮呢,自己判断。 1周前

不错,自己想了很久都没有行动,值得学习 :+1:

1周前 评论

期待分享一下思路: 后端添加的路由是怎么注册到vue的路由里面的

1周前 评论
largezhou: 这个,,,router.addRoutes 就行了,添加之前,遍历后端的数据,用 path 去找到组件,,,其实实现很简单的,,, 1周前
michealzh: @largezhou 谢谢 懂你的意思了 1周前
largezhou: @michealzh 可以看下 resources/src/router/index.js 中的代码 1周前

终于找到你。

1周前 评论

克隆下来 compsoer update env都配置了。进不了后台页面。404

1周前 评论
largezhou: 额,,,看来我要把 readme 写一下了,,,laravel 那套搞完后,执行 artisan admin:init 初始化数据库数据,,,然后你还要编译前端资源,,yarn 然后 yarn build 1周前
redline: e..npm instal ,npm run build 可以把 1周前
redline: 可以了。。还有JWT_SECRET要加在env里 1周前
largezhou: @redline jwt 也属于 laravel 那一套中的 😂 1周前
redline: 嗯嗯。。牛逼 1周前

我们是通过在前端router的meta字段里面存储这个页面所需要用到的接口的数组,登录后后端返回这个用户所拥有的所有接口数组,然后与路由里面的meta字段数组取交集来判断这个路由显不显示,页面的按钮通过自定义指令判断是否在当前路由的meta字段里面来决定是否显示

1周前 评论
largezhou

@zjwshisb 菜单根据路由配置生成的吗?

你们这样不能通过后端来随意修改路由的嵌套层级和顺序吧?不过这并不是什么很必要的功能,,,只是我个人喜好了,,,

后端返回用户拥有权限的所有接口,,,会不会一大坨?我这个页面上如果要单独控制某个按钮显不显示,是用权限的 slug 来判断的,不过我还没弄,,,

我也来搞个自定义指令做这个可以,,

用自定义指令做这个,是不是也就只比用 v-if="can('edit-post')" 来说,语义化强一点?

1周前 评论

@largezhou 是的呀,菜单就根据路由来
一大坨也没啥关系,就长度几百的一个数组嘛
主要我们还整合rbac的权限控制,permission表字段就存接口的名称(users.index)这样的,配合laravel的api路由,这样就一整套就配合起来了

1周前 评论

期待你的 readme ~ 404中

1周前 评论
largezhou: 更新了 readme,😂 1周前

添加了新的路由然后访问新的路由404是因为没有对应的组件的原因吗?

11小时前 评论
largezhou

@SamCCC

是啊,,,这路由的添加基本上算是开发用的功能了吧,,,不是随便添加就有页面的,,只是如果你权限要更细分一点,可能可以给特定用户调整路由的层级和顺序,这还是有点点用处的,而且这个路由和菜单的权限,可以通过管理后台随意调整,不用重新打包前端资源。

不过评论里也有其他方案,,,

11小时前 评论
yulinzhihou

很不错,牛逼

10小时前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!