javascript - Vuex getter 在组件中获取用户角色
问题描述
我是 Vue.js Vuex 和 Firebase 的开发新手,我正在尝试根据用户角色显示不同的导航栏项目。我目前正在从 Firebase 获取用户数据作为对象并将其传递给商店。
我尝试在 vuex 中使用 getter 来检查用户角色,并且只有当用户作为角色“管理员”时它才有效。
这是我的吸气剂:
isAuthenticated (state) {
return state.user
},
userAuth: state => state.user.roles === 'thinker'|| 'e-libre' || 'hacker' || 'admin',
reviewerAuth: state => state.user.roles === 'reviewer' || 'admin',
devAuth: state => state.user.roles === 'dev' || 'admin',
adminAuth: state => state.user.roles === 'admin',
我希望这些函数在我的组件的计算属性中返回一个布尔值,以便我可以检查用户是管理员还是例如审阅者,以便我可以显示不同的项目。
这是我的计算函数
computed: {
app$(): IApp {
return this.$store.state;
},
isAuthenticated () {
return this.$store.getters.isAuthenticated
},
adminAuth () {
return this.$store.getters.adminAuth
},
reviewerAuth () {
return this.$store.getters.reviewerAuth
},
然后我不知道为什么当用户角色是“管理员”而不是当用户作为另一个角色时这个功能可以正常工作。
adminItems () {
if (this.adminAuth) {
return [
{ text: 'Admin', icon: 'lock', subheader: 'admin',
children: [
{ text: 'Management', route: '/management', icon: ''},
{ text: 'Settings', route: '/settings', icon: ''}
]
}
]
}
}
例如,当用户作为角色审阅者时,reviewerAuth 返回未定义:
<v-list-tile v-if="!adminAuth||!reviewerAuth" to="/" avatar>
<v-list-tile-avatar>
<v-icon>translate</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Devenir reviewer</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-divider v-if="!adminAuth||!reviewerAuth"></v-divider>
<v-list-tile
v-for="(item, index) in userItems"
:key="index"
:to="item.path"
avatar
@click="">
<v-list-tile-avatar>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-avatar>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
我在那里想念什么?我有点同时在学习 javascript,感觉我做的完全错了。
非常感谢你的帮助
菲尔莫
解决方案
您有一个简单的问题,即检查的语法不正确。考虑
1 === 2 || 'hello'
这返回:hello
。
同样,您也有类似的错误:
userAuth: state => state.user.roles === 'thinker'|| 'e-libre' || 'hacker' || 'admin',
reviewerAuth: state => state.user.roles === 'reviewer' || 'admin',
devAuth: state => state.user.roles === 'dev' || 'admin',
adminAuth: state => state.user.roles === 'admin',
应该改为:
userAuth: state => state.user.roles === 'thinker'|| state.user.roles === 'e-libre' || state.user.roles === 'hacker' || state.user.roles === 'admin',
reviewerAuth: state => state.user.roles === 'reviewer' || state.user.roles === 'admin',
devAuth: state => state.user.roles === 'dev' || state.user.roles === 'admin',
adminAuth: state => state.user.roles === 'admin',
推荐阅读
- python - 如何在 pymongo 中使用 $add、$subtract?
- python - 如何让 dev_appserver.py 使用单独版本的 python?
- php - 无法使用用户名特殊字符更新项目 ID
- c - 如何理解 SIGSTOP 交付?
- python - AttributeError:“NoneType”对象没有属性“get_text”阻止我继续前进
- vim - Configuring Vim/Neovim ALE plugin to support :ALEGoToDefinition in JavaScript files
- android - Xamarin Forms Essentials - 事件 OnMainDisplayInfoChanged 未在 Android 上触发
- sql - 在 CIDR 上加入 Postgres 表
- java - 从其他类访问 Spring Boot / MongoDB 控制器类
- c++ - 将 printf 添加到变量并获得意想不到的结果