# 前端手册

EightRoes-Client 使用的前端框架是antd-design-vue,如果你还不了解这个框架,请先去看一下文档。

EightRoes-Client 只针对权限这块做了调整而且。

# 安装开发环境-windows

安装 node:https://www.runoob.com/nodejs/nodejs-install-setup.html

安装 yarn

npm install -g yarn

# 运行 EightRoes-Client

  1. 拉取 EightRoes-Client: https://gitee.com/quella01/EightRoes-Client.git

  2. 使用 IDA 打开 EightRoes-Client,切换到项目目录使用yarn install安装依赖。

  3. 运行项目:yarn serve

  4. 启动完后打开 localhost:8000 即可

# 权限配置说明

EightRoes 的权限配置方式是非常灵活的,符合真实使用场景,可以应对不同类型项目的权限配置方式。

机构范围是最顶级的,用户和角色只能设置所属机构权限范围内的权限。 用户设置角色后会继承角色所拥有的权限,且不能修改。

顶级机构和超级管理员拥有全部权限

机构权限 > 角色权限 (一个机构可以有多个角色, 角色的权限设置范围为角色所属机构的权限)

用户权限 >= 角色权限 <= 机构权限 (一个用户可以拥有多个用户所属机构下的角色,用户的权限设置范围为用户所属机构的权限)

http://eightroes-doc.oss-cn-beijing.aliyuncs.com/img/userpriv.png

# 菜单按钮权限

# 菜单权限控制

EightRoes 控制菜单权限只需要在路由表的 meta 属性上加上 priv 属性即可

 meta: { title: '系统管理', icon: 'setting', priv: [ 'SystemManagerPriv' ] },

 // 'SystemManagerPriv' 为后台配置的菜单扩展项

 public class SystemManagerPriv extends AbstractMenuPriv{
    private static final String MenuID = "SystemManagerPriv";

    public SystemManagerPriv() {
        super(MenuID, "系统管理", null);
    }
}

# 按钮权限控制

EightRoes 使用了自定义指令 v-priv 来控制按钮级的权限

注意:v-priv="'UserManagerPriv.Add'" 字符串必须用''单引号,标识这是一个字符串, 并且支持 'a||b'的写法

<a-button type="primary" icon="plus" @click="$refs.modal.add()" v-priv="'UserManagerPriv.Add'">新建</a-button>

如果你想在代码中判断是否拥有权限可以使用this.$auth('UserManagerPriv.PrivRange')来判断,并且支持 'a||b'的写法

export default {
  name: 'User',
  data () {
    return {
      editEnabel: this.$auth('UserManagerPriv.Edit'),
      removeEnable: this.$auth('UserManagerPriv.Delete')
    }
  }
}