无涯教程网

Vue.js Keycloak：用户基于角色的客户端登录访问限制

发布于07月24日

我正在try 使用KeyClope实现相当简单的基于角色的客户端应用程序(VueJS多页应用程序)控制用例.

如图所示，我在一个领域中有三个不同的角色和三个不同的客户机

所以我的主要目标是，

角色为Viewer的用户只能从log-in到Viewer Application.如果同一用户试图访问Operator Application或Admin application，那么KeyClope应该简单地拒绝该用户这样做.
对于角色为Admin和Operator的用户，应该遵循相同的规则.拥有Admin个角色的用户应该能够通过KeyClope访问这些应用程序中的任何一个.

为了实现这个用例，我try 了以下方法，

首先，通过适当的角色映射到用户，并在客户端创建角色.在本例中，我先创建领域级角色，然后创建客户端级角色，然后将适当的角色分配给用户部分中创建的用户.
启用Authorization.在策略中，我删除了允许所有用户访问客户端的默认策略.并创建User策略和Client策略来限制对客户端应用程序的访问
还try 了基于Group的授权策略.在本例中，我创建了一个具有客户端角色的组，然后将用户分配给这些组.并从Authorization组策略中启用它们.

但不幸的是，这些都不起作用.这意味着我的Viewer角色用户可以将log-in添加到我的管理应用程序中.这很奇怪.

推荐答案

你可以不用扩展就能做到这一点.

复制所需的流(例如浏览器流)
创建一个新的子流(例如，对于浏览器表单)，并将其命名为Access By Role，然后 Select generic作为类型.
对于新子流，确保在流概述中 Select CONDITIONAL.
对于新的子流add execution Condition - User Role，将其设为REQUIRED并进行配置:
添加另一个执行:Deny Access，并将其设为REQUIRED.

The final result should look similar to this:

如果条件"admin role missing"(管理员角色缺失)为真，这将拒绝访问.

你还可以从文档中了解更多:explicitly-deny-allow-access-in-conditional-flows

此外，不要忘记转到您的客户机，并在身份验证覆盖中 Select 流.

Vue.js相关问答推荐

Vutify-v-工具提示-不使用键盘轻击按钮显示

Vue Datepicker 不会在渲染时显示默认日期

处理多张卡片中的按钮

路径别名在 vue 脚本块中不起作用

在 Ajax 函数中访问 Vue.js 组件属性

Vuetify grid layout - 如何填充网格中元素的高度

我是否必须在 Vue 3 中使用 Composition API，还是仍然可以使用Vue 2的方式工作？

如何使用带有自定义标签和类的`transition-group`

在 v-for 的情况下如何从 v-model 输入更新 Vuex 存储

如何在 .js 文件中使用 Vue i18n 翻译？

即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误

在 Vuejs 中计算 DOM 元素之间距离的最佳方法是什么？

在Vue中单击路由链接上的激活方法

输入文件 Select 事件在 Select 同一文件时未触发

模块构建失败：错误：没有给出解析器和文件路径，无法在 nuxtjs 中推断出解析器

如何在 Vue.js 插槽范围内传递方法

Vue.js 中的 CSS 框架

Vuetify - 如何进行分页？

v-if 未在计算(computed)属性上触发

如何订阅store 模块

实用课程推荐

相关教程推荐