前端怎么处理鉴权?
一般我们来说主要针对RBAC鉴权模式进行控制
页面鉴权用户有没有权限访问该页面,或者有没有查看通往该页面路由的权限。(组件和路由)
组件: 一.有没有权限访问页面的时候:通过路由守卫结合后端返回来的token,进行页面跳转之前的鉴权,查看token是否过期并且是否拥有该页面的权限。
路由:判断用户是否有权限查看通过指定页面的路由(或菜单或导航): 1.纯前端处理:在写路由表的时候,我们会在每个路由下加一个meta,然后在meta里面写出可以访问或查看该路由或页面的角色信息,然后我们可以通过该meta下的信息使用addrouter控制该路由下的显隐 2.前后端配合处理:每次登陆的时候,都在后端那里获取token的路由表保存到vuex里,在通过addrouter动态渲染token下的路由及导航
UI鉴权:它的颗粒度很细,所以说难度较大,我们可以通过统一的自定义指令来进行配置。
一般来说UI鉴权指的是按钮鉴权处理UI鉴权 简单的方法是我们可以获取token下的角色信息,用v-if处理该UI的显隐,但是这种方式缺点很明显,不易于统一管理,所以我们需要集中封装一个自定义指令,在自定义指令中,集中处理鉴权的逻辑,然后分发在每个鉴权的按钮上。
前端项目优化
主要分为:性能优化和代码优化
-
v-for设置正确的key值(优化diff算法的对比速度)key值尽量设置id,键值名
-
封装复用模块(http请求),组件(ui库)
-
路由懒加载:减少首屏加载时间
-
用keep-alive缓存不活跃组件
-
图片使用图片精灵或图片赖加载,cpn三种方法进行优化
-
在打包的时候插件尽量使用cdn引入减少项目体积
-
在搜索下拉触发事件的时候使用截流防抖进行优化
-
变量名,函数名,模块名使用语义化去定义
-
变量名,函数名,模块名,组件名按照vue官方命名
-
在编写代码时候进行代码注释,尤其是在封装接口时候注释字段信息