V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
tower1229
V2EX  ›  分享创造

Vue 权限管理解决方案

  •  
  •   tower1229 ·
    tower1229 · 2017-11-30 12:45:39 +08:00 · 8862 次点击
    这是一个创建于 2301 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue-access-control

    npm license

    :gem: Vue 权限管理解决方案

    介绍

    Vue-Access-Control 是一套基于 Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

    文档

    Vue2.0 用户权限控制解决方案

    基于 Vue 实现后台系统权限控制

    用 addRoutes 实现动态路由

    下载

    项目主页: http://refined-x.com/Vue-Access-Control/

    git:git clone https://github.com/tower1229/Vue-Access-Control.git

    npm:npm i vue-access-control

    演示

    测试账号:

    1. username: root
       password: 任意
    2. username: client
       password: 任意
    

    演示地址:

    vue-access-control.refined-x.com

    运行及构建

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build
    
    # build for production and view the bundle analyzer report
    npm run build --report
    

    For a detailed explanation on how things work, check out the guide and docs for vue-loader.

    许可证

    MIT

    Copyright (c) 2017-present, 前端路上



    6 条回复    2017-12-01 08:29:29 +08:00
    loading
        1
    loading  
       2017-11-30 13:04:41 +08:00 via Android
    后端呢,我一直对 spa 感兴趣,但是后端实现没发现太多的实践。(非 node.js)
    xiadd
        2
    xiadd  
       2017-11-30 13:39:00 +08:00
    @loading 我在项目里一直用 传统后端项目的前端管理以及部分使用前端框架
    vex2
        3
    vex2  
       2017-11-30 14:13:24 +08:00
    我的做法是后端 RBAC 数据,前端加 v-role / v-permission 的 directive 控制,路由在 router.beforeEach 里做干预。
    将前端的 router name 跟后端的 api 对应的 router 对应。做到统一处理。

    楼主代码没看 不清楚啥思路。
    heeexy
        4
    heeexy  
       2017-11-30 22:27:16 +08:00
    看到楼主做法和 vue-element-admin 里的做法差不多
    有了现代前端框架之后,前端做权限确实舒服了很多

    我的做法是无论前端后端, 验证的时候完全不看 role, 只看 permission
    后端用 springboot+shiro ,
    数据表里保存着 menu 和 permission 的一对多信息,前端生成菜单的时候看用户的 menu 数组,验证只需要看 permission 数组

    思路写在了 https://github.com/Heeexy/SpringBoot-shiro-vue 欢迎指点
    tower1229
        5
    tower1229  
    OP
       2017-12-01 08:25:52 +08:00
    @heeexy 我跟你的做法一样,也是完全不管 role,只看 permission。permission 数据包含路由和资源两部分,通过将这两部分数据具体应用到对前端路由、视图、请求三个层面的控制中,实现更小颗粒度的权限控制
    tower1229
        6
    tower1229  
    OP
       2017-12-01 08:29:29 +08:00
    @vex2 我没有基于角色控制,因为这个颗粒度太粗了,而是直接基于资源权限做控制,可以做的更灵活细致一些。路由方面我用 addRoutes 实现动态路由,主要是觉得 router.beforeEach 这种做法每次跳转都要校验,像是 demo 级的实现。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3501 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:52 · PVG 18:52 · LAX 03:52 · JFK 06:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.