路由菜单权限控制增加新方式

[snowchenlei]

当前项目权限模式后台配置方式：后台需要配置的是路由而不是菜单，前端通过路由映射菜单。 ———————————————————————————————————————————————————————— 希望增加新方式，路由完全由前端定义，后台配置菜单并动态加载。 AppRouteRecordRaw增加字段canActive参数为接口类型并默认使用roles模式实现接口，便于用户自定义替换。menu中的roles删除。通过Route控制权限

[acegank]

很有必要的一点，大部分的情况应该是动态方式

[zhangfugui727]

是的，这个确实需要，但是实现细节我没看明白，我补充一下我们思路吧

前台路由没有做权限控制，后台接口有接口权限，避免路由没有控制造成数据泄露，且接口权限大多是每个系统必须的。

所有的角色定义和权限计算都是在后台进行，因为我们角色是动态角色，管理人员只会在角色设置中勾选菜单或者按钮权限，不清楚怎么调整路由。新加菜单和修改菜单都会涉及到路由变化，太复杂了，并且某些路由属于公共组件，页面互相调用，就需要隐藏式的考虑这些问题。

直接加载的菜单就在后台过滤了，路由使用前台配置好的路由，不做控制，对于某些页面由功能权限控制（现在的指令权限）。

[snowchenlei]

是的，这个确实需要，但是实现细节我没看明白，我补充一下我们思路吧

所有的角色定义和权限计算都是在后台进行，因为我们角色是动态角色，管理人员只会在角色设置中勾选菜单或者按钮权限，不清楚怎么调整路由。

前台路由没有做权限控制，后台接口有接口权限，避免路由没有控制造成数据泄露，且接口权限大多是每个系统必须的。

直接加载的菜单就在后台过滤了，路由使用前台配置好的路由，不做控制，对于某些页面由功能权限控制（现在的指令权限）。

现在大部分都是这样的。实现细节我是模仿ng-alain的，vue找不到那么好的框架。我基本实现了这个功能，但存在些bug。直接输入路由可以访问页面，这个我还没想好怎么解决。 而且后台根本不知到你前台有那些组件，在什么位置。

[zhangfugui727]

是的，这个确实需要，但是实现细节我没看明白，我补充一下我们思路吧 所有的角色定义和权限计算都是在后台进行，因为我们角色是动态角色，管理人员只会在角色设置中勾选菜单或者按钮权限，不清楚怎么调整路由。 前台路由没有做权限控制，后台接口有接口权限，避免路由没有控制造成数据泄露，且接口权限大多是每个系统必须的。 直接加载的菜单就在后台过滤了，路由使用前台配置好的路由，不做控制，对于某些页面由功能权限控制（现在的指令权限）。

现在大部分都是这样的。实现细节我是模仿ng-alain的，vue找不到那么好的框架。我基本实现了这个功能，但存在些bug。直接输入路由可以访问页面，这个我还没想好怎么解决。 而且后台根本不知到你前台有那些组件，在什么位置。

直接输入路由的就不管了，只要后台控制好接口权限就可以了，后台菜单过滤和前台按钮指令权限就可以避免大多用户误进入隐藏路由，直接敲的那种没有办法弄，对于大型系统来说如果把路由纳入动态管理，真的很复杂。基本不可能能配置正确，页面相互调用相互嵌套，并且后台动态菜单管理也是为了运维管理员准备的，但是这些运维管理员真的没法维护路由权限，开发人员是没有精力管这些的。

当然如果页面很少，系统不庞大，配置路由权限也可以。

[snowchenlei]

是的，这个确实需要，但是实现细节我没看明白，我补充一下我们思路吧 所有的角色定义和权限计算都是在后台进行，因为我们角色是动态角色，管理人员只会在角色设置中勾选菜单或者按钮权限，不清楚怎么调整路由。 前台路由没有做权限控制，后台接口有接口权限，避免路由没有控制造成数据泄露，且接口权限大多是每个系统必须的。 直接加载的菜单就在后台过滤了，路由使用前台配置好的路由，不做控制，对于某些页面由功能权限控制（现在的指令权限）。

现在大部分都是这样的。实现细节我是模仿ng-alain的，vue找不到那么好的框架。我基本实现了这个功能，但存在些bug。直接输入路由可以访问页面，这个我还没想好怎么解决。 而且后台根本不知到你前台有那些组件，在什么位置。

直接输入路由的就不管了，只要后台控制好接口权限就可以了，后台菜单过滤和前台按钮指令权限就可以避免大多用户误进入隐藏路由，直接敲的那种没有办法弄，对于大型系统来说如果把路由纳入动态管理，真的很复杂。基本不可能能配置正确，页面相互调用相互嵌套，并且后台动态菜单管理也是为了运维管理员准备的，但是这些运维管理员真的没法维护路由权限，开发人员是没有精力管这些的。

只要路由增加canActive就能实现输入路由拦截。 思路就是页面加载完成获取当前登录用户的所有权限，在地址栏输入地址后会先被拦截判断canActive的值是否在权限中，如果有就可以访问，如果没有就跳到其它页面

[zhangfugui727]

只要路由增加canActive就能实现输入路由拦截。 思路就是页面加载完成获取当前登录用户的所有权限，在地址栏输入地址后会先被拦截判断canActive的值是否在权限中，如果有就可以访问，如果没有就跳到其它页面

路由拦截这个肯定能实现的，有路由权限就能控制，只是这个路由权限怎么有效维护，我原来考虑过路由路径算法，不过嵌套的也不好维护，运维管理员基本不懂

[snowchenlei]

只要路由增加canActive就能实现输入路由拦截。 思路就是页面加载完成获取当前登录用户的所有权限，在地址栏输入地址后会先被拦截判断canActive的值是否在权限中，如果有就可以访问，如果没有就跳到其它页面

路由拦截这个肯定能实现的，有路由权限就能控制，只是这个路由权限怎么有效维护，我原来考虑过路由路径算法，不过嵌套的也不好维护，运维管理员基本不懂

我这边权限是字符串。比如说现在有个商城系统的角色管理页面，会定义如下权限字符串： 'Shop.Role'(列表方法的权限，简单的话可以与页面公用)、'Shop.Role.Manager'(页面权限)、'Shop.Role.Create'(创建权限——前端可以通过这个判断按钮是否显示)、'Shop.Role.Update'(修改权限)等等。 而具体的角色就是与这一堆字符串关联。页面加载完成获取的权限也就是这些字符串数组。canActive:'Shop.Role.Manager'。拦截器里面判断canActive值字符串是否在数组里面或者是否值为true即可。 如果担心运维管理员不知道这些字符串有哪些，可以进行下拉选择。

[zhangfugui727]

我这边权限是字符串。比如说现在有个商城系统的角色管理页面，会定义如下权限字符串： 'Shop.Role'(列表方法的权限，简单的话可以与页面公用)、'Shop.Role.Manager'(页面权限)、'Shop.Role.Create'(创建权限——前端可以通过这个判断按钮是否显示)、'Shop.Role.Update'(修改权限)等等。 而具体的角色就是与这一堆字符串关联。页面加载完成获取的权限也就是这些字符串数组。canActive:'Shop.Role.Manager'。拦截器里面判断canActive值字符串是否在数组里面或者是否值为true即可。 如果担心运维管理员不知道这些字符串有哪些，可以进行下拉选择。

我接口权限是这么做的，提前列好分类，列表权限或者创建删除权限等，运维人员就在里面选。前台我觉得你这个也是一个思路，就是给路由分组，然后让运维人员去选，当然和接口权限一样得提前有人去设置基础数据，有的公共路由或者页面路由嵌套调用（例如本来属于当前菜单的路由，点击一个按钮跳转到了另一个菜单路由，等几天可能开发又加了个按钮跳转了其他页面路由），就需要单独维护。

[sohubill]

自己开发就可以了。后端设置按钮和页面权限。前端通过接口获取。页面权限的值可以和路由保持一致，根据这个值来动态加载菜单栏。然后再做路由守卫，做一个通用方法去判断用户有没有这个页面权限。有就进入没有就跳转404，这样就可以防止通过地址栏进入没权限的页面了