Vue权限控制(前后端分离之后的权限控制)

公司前后端已经分离开,过程中涉及权限控制的部分,实现过程如下:

权限类型

  • 页面权限
  • 按钮权限(功能权限)

登录信息验证

总则:前端通过API接口向服务端请求的时候会携带token信息,服务端判断登录状态、用户权限等问题。

页面权限
页面级别的权限由前后端一起控制
服务端:根据用户信息筛选有权限的网站,返回给前端相应的用户信息
前端:基础路由只写登录页、错误页等不需要权限控制的页面,异步动态添加前端路由,根据服务端返回的用户路由(页面)数据、构造前端理想的路由数据。

按钮权限
由服务端将用户拥有的按钮权限数据返回,前端通过自定义指令判断用户是否有特定按钮权限。

整体实现逻辑

  1. 添加路由进入前的钩子
  2. 获取储存在cookie中的token信息
    • 如果没有token则指向到登录页
    • 有token信息
      • 判断目标页面是在不需要验权的页面中
        • 在则继续访问,
        • 不在尝试请求用户信息,构造路由信息,动态加载路由信息,访问目标页面。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 完整项目地址:vue-element-admin系类文章一:手摸手,带你用vue撸后台 系列一(基础篇) 前言 拖...
    7cd975786ccd阅读 10,830评论 4 65
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,827评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,145评论 2 59
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • 在二零一八年一月三十一日这一天的夜晚,在那漆黑无比的天空中,原先那一个洁白的月亮突然间变成了红色的月亮。那为什么月...
    李洋06阅读 360评论 0 1