新手小白,之前从未做过类似的权限功能。
首先说明一点,就是从我百度的经验以及从身边人了解的知道,做权限控制最好是后台返回菜单数据,然后前台渲染。而所谓的前台控制权限是不存在的,只不过是,前台控制显示而已,有待深入了解。
一开始我是蒙圈的,百度了好过都说需要前台配置然后调用接口,后台返回菜单数据,最后进行渲染。但我始终不明白这中间如何操作才能让后台返回菜单数据。
但因为我的合作伙伴,后端同事说不使用这个方法,他说其实不管我前台传给后台什么数据,他都不会完全信任的,所以,他在后台也是做了权限的(比如某个账户不能调用某个接口)。不使用这个办法,那就好办咯。以下是自己想出来的解决办法,解决不同身份的账号登录进去动态显示不同的菜单。
系统账户目前分为三种:管理员,技术员和生产员,而区分他们身份的是在登录成功后后台返回给我的一个classType值,值为0,则是管理员,值为1,则是技术员,值为2,则是生产员。
大致思路是:分别根据不同身份写三个不同的js文件,其中js文件中是包含不同菜单的一个json对象,然后在index中分别导入这三个文件,在vue实例创建的时候(也就是created方法中)在缓存中取出已经在登录后拿到的classType值,根据不同的值选择合适的数据进行渲染菜单。
index.vue文件: