vue怎么判断当前用户能否看到这个按钮？

Question

我现在要做这么一个功能

每次登陆后后端会返回当前用户的权限给我：

"permissions": [
    "account:update",
    "account:list",
    "account:findById",
    "adveradvertiser:add"
],

我会把这些数据存到localStore里，这个“创建广告主”按钮我会根据后端给我的数据是否含有"adveradvertiser:add"，如果有就显示，没有就隐藏。

首先我想到的是v-if ，但是这里我不知道怎么去循环判断permissions数组是否含有adveradvertiser:add

<button class="btnYellow" v-if="">创建广告主</button>

Answer 1

不用把权限存到缓存中，你放在data中就行
js

data() {
      return {
          permissions: [
                "account:update",
                "account:list",
                "account:findById",
                "adveradvertiser:add"
            ],
      }
}

html

v-if="permissions.indexOf('adveradvertiser:add') > 0?true:false "

Answer 2

js

data() {
      return {
          permissions: [
                "account:update",
                "account:list",
                "account:findById",
                "adveradvertiser:add"
            ],
      }
}

html

 v-if="permissions.some(p=>p==='adveradvertiser:add')"

Answer 3

写个方法判断一下数组中是否含有 adveradvertiser:add 这个字符串。