Vuejs2 Vue js与identity server 4的集成

我正在客户端用vue js实现identity server 4

目前，我在应用程序中只有管理员登录，带有密码和用户名

我没有任何公共站点，用户从那里被重定向到登录。我希望用户在点击应用程序客户端URL时直接重定向到登录页面

目前，在identity server 4的示例版本中，用户需要点击导航栏上的登录按钮并重定向以登录

我想用以下方法来做：

客户端点击URL。检查用户是否经过身份验证。 重定向到Identity Server。 使用用户名/密码登录 成功登录后重定向到客户端门户。 我很难将这种方法集成到vue js中

在我当前的实现中，应用程序总是在循环中运行，并且总是重定向到登录

store.getters.isAuthenticated从来都不是真的，它总是使用SignIn重定向应用程序

我不知道是我的路由器中遗漏了什么，还是oidc的实现中遗漏了什么

路线：

导出常量路由=[ { 组成部分：全部， 路径：/， 元：{ 真实的 }, 儿童：[ { 路径：/dashboard， 姓名：Dahboard， 组件：仪表板视图， 元：{ 真实的 } }, { 路径：/signin， 组成部分：签名 }, { 路径：/公司， 组成部分：公司， 元：{ 真实的 } } ] }

---

]; 我不确定我是否正确理解了所有内容，而且我从未与Vue合作过。 但让我来描述一个典型的隐式流程，我假设，您希望在这里实现：

用户将访问未经验证的站点，例如yoursite.com/dashboard AuthService将尝试登录用户，即他/她将被重定向到identity server的登录页面 如果用户在identity server上没有有效的会话，将提示他/她获取凭据。否则，他/她将立即重定向回您站点的请求重定向uri，例如yoursite.com/signin。 此时，用户已返回您的站点，但仍未登录。您会注意到，url将在字符后面包含许多附加文本，例如yoursite.com/singinaccess_token=ey456。。。 当您调用completeLogin时，oidc客户端将读取此数据并将其保存在浏览器会话存储中-此方法完成后，您的用户将登录，您可以将其重定向到原始站点，例如yoursite.com/dashboard 您可能会在步骤1-4之间得到一个无限循环，因为您从不允许步骤5发生，因此登录永远不会完成

尝试更改您的登录组件

import authService from './authService';

export default {
    name: 'Auth',
    mounted() {
        //authService.login(); -- This line will redirect the user again before the login can complete
        authService.completeLogin();
    }
};

---

还要确保用户可以访问登录组件，即使他/她尚未通过身份验证，这样他/她就可以完成登录过程。

您可能应该使用openid标记您的问题连接协议标识服务器实现和oidc客户端您在SPA端使用的库。是的，您是对的，我通过步骤4获得looop。它每次都使用相同的令牌url重定向。完全登录永远不会发生。那么，我应该在哪里调用“SignInDirect”？这取决于用例。每当用户需要验证但尚未验证时，调用SignInDirect。例如，在加载特定路由之前或当用户单击登录按钮时。在加载之前或在sigin组件内部不要调用SignInDirect，因为这将触发循环。是的，在我的应用程序中也发生了同样的事情，我完全按照您所说的方式来做。但我很高兴能把它从SignIn身上移开。因为我需要在检查路由是否经过身份验证后将应用程序重定向到SignIn组件。它在循环中移动，因为completeLogin永远不会完成。好吧，这里是您的错误：登录组件应该在用户登录后访问。您必须设置路由，以便identity server可以重定向它，例如。http://yoursite.com/signin 而且它必须可以自由访问，无需登录。在登录之前，您不需要登录组件，因为当用户应该登录时，您可以直接调用SignInDirect。是的，我得到了一些关于这一点的信息。但是，我不会有任何登录按钮或任何东西，可以触发直接登录。我需要在主应用程序URL中触发它。目前，我正在登录组件中执行此操作。但是我应该在哪里实现触发signInDirect的逻辑呢？你有什么建议？