201809更新

v-auth控制弹窗内元素渲染会出现首次渲染成功后，第二次打开弹窗为false的情况，导致权限判断失败，页面样式错位，所以无法在弹窗内使用该方法。

解决方法：因为只需要页面初次加载时判断用户有无功能权限，通过接口查询一次后赋值给data的xx属性，通过属性的值来判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
async created() {
  // do someting

  // 查询有无删除调账记录权限
  try {
    let valid = await this.fCheckAuth('household.HOUSEHOLD_DELSUBJECT')
    if (valid) {
      this.show_del = true
    }
  } catch (e) {
    console.log(e)
  }
},

前端页面内权限控制规范

目前的权限系统支持到动作点的细粒度控制，前端支持前置判断权限从而控制节点的展示与隐藏，执行相关逻辑等。前端通过 mixin 混入权限控制模块进行判断和处理。

自定义组件需要单独import '@/mixin/auth'，如果是已经引入了@/mixin的页面组件则不需要额外引入该模块。

该模块提供一个自定义指令v-auth和一个公共方法fCheckAuth，前者用来根据权限控制一个节点的展示或隐藏，后者通过该方法查询当前角色是否有某权限。

动作点管理

动作点统一添加到@/config/auth。动作点通过模块管理，值为后台刷新的动作点名。

1
2
3
4
5
6
export default {
  // 账单
  bill: {
    CONFIRM_OFFLINE_PAYMENT: 'accounting_billcenter_confirmofflinepayment' // 确认财务收款
  }
}

v-auth

v-auth接收多种格式的参数。

传入字符串

可以传入一个形如'bill.CONFIRM_OFFLINE_PAYMENT'的字符串，指令会到配置中寻找对应的路径查询当前动作点是否有权限，如果没有权限，则移除这个 DOM。

注意：传入的是字符串'bill.CONFIRM_OFFLINE_PAYMENT'，而不是bill.CONFIRM_OFFLINE_PAYMENT，后者会被框架当做组件的data值去获取。

传入对象

可以传入的是一个对象：

参数名 类型 解释
auth String 逻辑处理同字符串参数
hide Boolean 如果为true，则将其display属性置为none（而不是从 dom 中移除这个节点）
reverse Boolean 如果为true，则展示逻辑与正常相反，即无权限时展示该节点，有权限时移除这个节点

传入布尔值

如果传入的是一个布尔值且该布尔值为false，则移除这个 DOM。作用同v-if。

fCheckAuth()方法

使用this.fCheckAuth(auth)方法判断当前是否有auth权限，auth参数同v-auth自定义指令接收的字符串参数。

注意，这是一个异步方法。使用

1
2
3
4
let valid = await this.fCheckAuth('bill.CONFIRM_OFFLINE_PAYMENT')
if (valid) {
  // do something
}

或者

1
2
3
4
5
this.fCheckAuth('bill.CONFIRM_OFFLINE_PAYMENT').then(valid => {
  if (valid) {
    // do something
  }
})

判断是否具有相关权限。