vue 权限控制

Question

1. 项目使用了vue + vue-router作为前端框架, 现在需要做权限控制,

2. 由于本人没啥经验, 想请各位指点一下, 怎么设计前端的权限

---

补充: 抱歉可能我表达不清, 意思是前端对某个角色的权限进行控制, 比如有些页面不显示, 有些按钮不能点击

Answer 1

最近搭建了公司的后台管理系统， 而且系统还比较庞大， 要实现以下几点：

1. 菜单权限， 根据不同权限显示不同的菜单

2. 操作权限， 比如有些账号没有新增权限， 有些没有修改或者删除权限

3. 数据权限， 比如统计概况， 普通管理员不能看到公司营业概况，但能看到自己所属区域的概况

4. 显示权限， 比如列表， 运营能看到那一列的签约金额，但市场不能看到签约金额这一列

到目前为止还在构建中， 已经解决菜单权限和操作权限。
菜单权限：

最开始的时候也是按照楼上给出的方法，本地先配置一套路由，然后登陆成功后会从服务器返回一个菜单列表，然后在beforeEach里面把返回的菜单列表和本地配置的路由进行对比， 如果存在则有权限访问。 做了几天发现很难用， 本地得配置一整套路由，还得做几个页面来把这些路由信息写入到服务器，这样来进行权限分配， 当你的权限菜单比较多的时候， 像我们这个后台，光公司内部权限就有好几套， 还有代理商、商家权限等等， 不同的菜单可能会超过几百个， 这样配置太累了，还容易出错。
最后的解决思路是完全不在本地做任何路由配置， 登录页面单独弄，不放到vue组件里面， 登录成功后从后台抓取菜单列表， 因为现在是已经登录成功了，所以抓取的就是拥有全新的菜单。 抓取成功后在配置到路由里面，然后实例化vue , 这样就避免了本地配置一套路由了，完全是服务器上面配置路由。
这样解决的难点只有一个，那就是路由需要对应的组件，所以我们将所有组件存放到一个对象里面， 服务器的返回的菜单列表里面，会有一个字段配置组件名， 在抓取成功后生成路由配置的时候就使用 router[menuName]就能直接加载到这个组件，非常方便。

main.js代码片段：

// 实例化Login类并初始化
  new Login(function (err, data) {
    if (err) {
      // 登录出错
    } else {
      // 登录成功
      init(data);
    }
  }).init();

const init = function (data) {
  // 先配置路由信息
  // componentConfigs 是本地的组件配置
  let routers = assignRouter(data.menus, componentConfigs);
  // 实例化路由
  router = new Router({routes: routers});
  // 再实例化vue
  new Vue({
    el: '#app',
    store,
    router,
    nprogress,
    ...App
  });
};

componentConfigs.js 代码片段：

export default {
  Common: {
    Admin: require('../../vue/pages/common/Admin'),
    Index: require('../../vue/pages/common/Index'),
    UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users')
  }
}

服务器返回的菜单json:
其中meta 字段里面是当前路由里的操作权限

[{
            "path": "\/admin\/index",
            "name": "\u9996\u9875",
            "component": "Common.Index",
            "display": true,
            "icon": "icon-home"
        }, {
            "path": "\/admin\/updatePassword",
            "name": "\u4fee\u6539\u5bc6\u7801",
            "component": "Common.UpdatePassword",
            "display": false
        }, {
            "path": "\/admin\/commodity",
            "name": "\u5546\u54c1\u7ba1\u7406",
            "component": "Content",
            "display": true,
            "icon": "icon-class",
            "children": [{
                "path": "\/admin\/commodity\/publicWarehouse",
                "name": "\u516c\u5171\u5e93\u7ba1\u7406",
                "component": "Commodity.PublicWarehouse",
                "display": true,
                "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
            }, {
                "path": "\/admin\/commodity\/businessesWarehouse",
                "name": "\u5546\u5bb6\u5e93\u7ba1\u7406",
                "component": "Commodity.BusinessesWarehouse",
                "display": true,
                "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
            }]
        }]

菜单的权限大概就是这样， 至于操作权限， 思路是这样的： 写一个鉴权的vue插件， 然后所有的操作独立放到methods里面; 然后所有的操作 @click里面调用鉴权函数， $auth('add', arg1, arg2, ...argN) ; $auth里面判断this.$route.meta 里是否有权限进行这个操作， 如果有则调用 this[authName].apply(null, arg);

Answer 2

推荐一个基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案，解决路由、视图、请求三个层面的权限控制：Vue2.0用户权限控制解决方案

Answer 3

1、定义路由的时候可以配置 meta 字段,在beforeEach勾函数进行权限过滤。
2、登录后后端返回一个标识（token），所有请求都带上token。如果对不上则返回403,然后进行跳转到登录页！

不过用a跳转的路由没有找到比较好的方法，只能在后端判断一个用来记录是否登录的一个标识是否存在，来进行权限控制。

Answer 4

<navigation v-if="['login', 'register'].indexOf($route.name) > -1"></navigation>

Answer 5

用state来记录用户的权限，watch 这个值，如果没有权限，则路由到别处

Answer 6

https://github.com/OneWayTech...

Answer 7

代码实现
GitHub: vue 动态路由权限管理

思路

用户登录成后，把用户信息保存至localStorage 和 vuex，用addRutes动态添加路由。 然后用 localStorage 和 vuex相结合，解决用户刷新路由无效问题

用户登录
  ↓
  - 成功
    ↓
    - 把用户信息保存至vuex
    - 把用户信息保存至localStorage
    - 用addRutes动态添加路由并跳转至首页
  ↓
  - 失败
    ↓
    - 继续登录

拦截路由变化
  ↓
  - 判断vuex中是否有用户信息
    ↓
    - 有用户信息
      ↓
      - 验证token
        ↓
        - token验证通过
          ↓
          - 跳转路由
        ↓
        - token验证不通过
          ↓
          - 跳转登录页面
    ↓
    - 没有用户信息
      ↓
      - 判断localStorage中是否有用户信息
        ↓
        - 有用户信息
          ↓
          - 验证token
            ↓
            - token验证通过
              ↓
              - 获取localStorage用户信息
                ↓
                - 设置vuex中的用户信息
                ↓
                - 重新设置用户路由
            ↓
            - token验证不通过
              ↓
              - 跳转登录页面
        ↓
        - 没有用户信息
          ↓
          - 跳转登录