vue 后台根据用户角色显示菜单

[laravel]

后台用的 iview-admin、 php 框架用的 laravel

现在想根据登陆用户的权限显示菜单 有什么最佳实践吗？

没有前后端分离倒是可以 if else 进行判断 难道要写个接口一次性把用户的 permission array 全部返回？然后在客户端的 router 的 meta 信息里写上对应的 role 或者 permissions ？

一般都这样做吗？

[imherer]

都前后端分离了，肯定是一个单独的接口，或者登录的时候返回当前用户的所有权限，然后客户端显示出了就好了

[skiy]

有个基于 element 的模板，你可以参考下。pan....那个。

[shsf4]

参考这个 https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html

[ChefIsAwesome]

分不分离，是不是用 vue 没什么区别啊。这个就跟在前台做表单验证一个意思：
首先是请求 /发数据的时候，没权限你得回个 401 什么的，这就保证你后端是没问题的了。
其次才是前端界面怎么显示，界面毕竟是可以绕过去的。像这个菜单跟权限对应的关系，你存前端存后端都没关系。就跟前后端要不要统一规则来验证手机号一个道理。

[liuy1994g]

你都用 iview-admin 了，它的菜单栏就是取的你的路由配置啊，取的时候在判断一下权限不就完事儿了

[sailei]

我的方案 是前端做限制没用， 后端接口 访问添加限制， 把用户分组 把权限加到组里

[laravel]

@sailei 那你就是后端表里不存菜单信息吧

[zhuweiyou]

我一般是 router 加 meta: { role: ['a', 'b'] }
后端 login 后返回这个登录者的 role: 'a' ，这样菜单循环出来的时候 判断 role 是否满足。

[laravel]

@zhuweiyou 嗯 我也打算这样做了，菜单级别的一般用 role，组件级别的（按钮、tag ）用 permission 指令，后端也不存 menu 菜单表了，我觉得这样比较适合我

[laravel]

我以前理解的最佳实践，就是大家都会怎么做，问了一圈发现后端一般的做法都是表里存菜单，前端都是通过登录用户获取权限、角色，然后在前端自己判断，我以前是做前端的，但是也会用 laravel 写个商城之类的东西。现在一个人开发，还是偏向于前端自己玩自己的，后端尽可能简单。

[mamahaha]

这个哪有那么复杂啊？你想多了吧。

[hoythan]

路由配置所有页面，路由入口加一判断，判断本地 localStorage 的 menus 中是否存在这个菜单，如果不存在，重定向到 home 页面，如果 home 也不存在，到 404 页面。

登录后调用接口获取菜单权限 并保存到 localStorage

[skallz]

一般是前端判断，然后显示对应部分，但是如果有用户绕过了前端判断或者哪里出现了 bug，后端得做好不返回数据，并且前端要有相应的处理

[hoythan]

const find = (url, menu = getMenu() || []) => menu.find(m => m.url === url || find(url, m.child))

if(!find(name)){
next({name: home})
}else{
next()
}

[hoythan]

用懒加载的方式，可以确保用户没有权限的时候不会加载对应的 js 文件。