前端项目权限的控制

分类

权限控制可以分为三部分：

• 登录权限
• 页面权限控制
• 接口权限

登录权限

登录访问权限是对用户的校验。用户登录成功后，后台会返回一个token，之后前端梅西进行接口请求的时候，都要带上这个token。后台拿到这个token后判断：存在并且没有过期，则可以通过访问。如果不存在或已过期，跳到登录页面，用户需重新登录。

• 做法一

用户登录成功后的回调中将后台返回的token直接存储在localstorage，同步配置请求默认参数的形式将token取出放入headers中传给后台

• 做法二：

使用vuex+localstorage+axios

页面权限控制

页面权限控制分为两种：

• 菜单的页面访问权限
• 项目中的菜单权限控制

项目中的菜单权限控制

• 1.权限涉及到的meta属性

  • noRequireAuth: true 无需权限直接挂载
  • manageFree: true 不在操作权限树中展示

• 2.router.beforeEach()拦截路由的钩子

  • 不需要权限的路由直接放行。meta内noRequireAuth和manageFree不受权限控制
  • 进入路由前，从后端请求获取需要展示的菜单。后端根据token判断当前用户权限，返回对应菜单。前端递归对比确定最终要显示的菜单列表

• 3.router.addRoutes()

  • 通过router.addRoutes()动态添加所有符合权限的路由 按钮权限控制（vue指令v-permission）

接口权限控制