angular - 使用 Angular 重定向 URI 回调后从 URL 获取 OAuth token

标签 angular authentication oauth-2.0 auth-guard

我将 Angular 应用程序重定向到 Spotify 登录 ( https://accounts.spotify.com/authorize ) 一旦他们登录,他们就会被重定向回 http://localhost:4200/callback 。该 URL 附加了一个 token 。但它立即重定向到(我希望它重定向到这里):

const appRoutes: Routes = [{ path: 'callback', redirectTo: '/host', pathMatch: 'full' }]

如何/在哪里保留身份验证 token 而不将其放在用户 URL 中?

我意识到我最终也需要 AuthGuards,但首先我想检索 token 。

最佳答案

我建议您不要在路由配置中直接设置“redirectTo”。相反,添加一个回调组件来处理 token 和重定向。如下:

const appRoutes: Routes = [
    { path: 'callback', component: CallbackComponent }
]

在回调组件中

export class CallbackComponent implements OnInit {
    constructor(private route: ActivatedRoute, private router: Router) {}

    public ngOnInit():void {
        const token = this.route.snapshot.queryParamMap.get('token');
        // Handle token
        // ...
        this.router.navigate(['./host']);
    }
}

关于angular - 使用 Angular 重定向 URI 回调后从 URL 获取 OAuth token ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61113507/

相关文章:

css - 在 angular-cli.json 中导入全局样式和将它们分别添加到每个组件中的每个 css 之间有什么区别?

angular - Chrome 87.0.4280 (Windows 10.0.0) : Executed 0 of null (skipped 229) ERROR (34. 875 秒/0 秒)

angular - Dockerized angular cli 应用程序热重载失败

authentication - WINdows Phone 10 Google Web 授权代理

amazon-web-services - 用户如何授予我的网站管理其 Amazon Alexa 列表的权限

javascript - 在 Angular 中使用 rxjs 进行双向数据绑定(bind)

c# - 当我选择身份验证选项时,Visual Studio 2013 没有创建数据库

ios - 如何在iOS APP中登录推特?

azure - 如何测试 Azure AD 访问 token 过期

facebook - FB.Auth.setAuthResponse 只兼容 OAuth2 问题