angular2 router.navigate 在 auth0 回调中

Posted 2023-03-08

【中文标题】angular2 router.navigate 在 auth0 回调中

【英文标题】：angular2 router.navigate inside auth0 callback

【发布时间】：2016-05-06 05:37:54

【问题描述】：

在 auth0lock 的回调中调用 router.navigate 后渲染模板时遇到问题

loginComponent.ts

import Component, Inject from 'angular2/core';
import Router, ComponentInstruction from 'angular2/router';

import Auth from '../auth';

declare var Auth0Lock;

@Component(
    selector: 'login',
    templateUrl: '/tpls/login/login.html'
)

export class LoginComponent 

    private lock = new Auth0Lock('xxx', 'xxx.auth0.com');

    constructor(@Inject(Router) private router: Router, @Inject(Auth) private auth: Auth)  

    logError = (err) => 
        console.log(err);
    

    loginSuccess = (data) => 
        if(this.router.parent.lastNavigationAttempt !== undefined && this.router.parent.lastNavigationAttempt !== '/Login') 
            this.router.navigateByUrl(this.router.parent.lastNavigationAttempt);
         else if(data.user.req_update) 
            this.router.navigate(['Profile']);
         else 
            this.router.navigate(['Home']);
        
    

    ngOnInit() 

        this.lock.show((err: Error, profile: any, id_token: string) => 
            if(err) return this.logError(err);
            return this.auth.login(profile, id_token);
        ); 

        this.auth.loginSuccess.subscribe(
            data => this.loginSuccess(data),
            err => this.logError(err)
        );

    

auth.ts

import Injectable, Inject, EventEmitter, Output  from 'angular2/core';
import Http, Headers from 'angular2/http';

@Injectable()

export class Auth 
    ...
    @Output() loginSuccess = new EventEmitter();

    login = (profile, id_token) => 
        ...

        this.addUser(profile).subscribe(
            data => 
                this.loginSuccess.next(data.json());
            ,
            err => 
                console.log(err); 
                this.loginSuccess.error(err.json());
            
        );
    
    addUser = (user: any) => 
        let body = JSON.stringify(user);
        return this.http.post('/api/user/add', body,  headers: this.headers);
    

homeComponent.ts

import Component, Inject, OnInit from 'angular2/core';
import Http from 'angular2/http';
import ROUTER_DIRECTIVES from 'angular2/router'

import Auth from '../auth';
import Post from '../post/Post';
import IPost from '../post/IPost';
import AuthorComponent from '../author/authorComponent';

@Component(
    selector: 'home',
    templateUrl: '/tpls/home/home.html',
    directives: [ROUTER_DIRECTIVES, AuthorComponent]
)

export class HomeComponent implements OnInit 

    private postService: Post;
    private posts: IPost[];

    constructor(@Inject(Http) private http: Http, @Inject(Auth) private auth: Auth) 
        console.log('constructor');
        this.postService = new Post(this.http, this.auth);
        this.getPosts();
    

    getPosts = () => 
        this.postService.all().subscribe(
            data => this.getPostsCallback(data.json()),
            err => this.logError(err)
        );
    

    getPostsCallback = (data) => 
        console.log('callback');
        this.posts = data;
    

    logError = (err) => 
        console.log(err);
    

    ngOnInit() 
        console.log('init');
        //this.postService = new Post(this.http, this.auth);
        //this.getPosts();
    

我在我的索引页面中包含了用于 authlock 的 cdn 脚本。似乎我在登录后导航到的任何路线都不会呈现。 this.lock.show 的回调有效，我可以读取变量。非常感谢任何建议。

基本概念：https://plnkr.co/edit/Oz8lY7v6q8GpH71WLtAK

【问题讨论】：

我有两个在任何异步类型代码中使用 router.navigate 和 router.navigateByUrl 时遇到问题。如果对路由器的调用是承诺、回调或可观察的，它似乎总是失败。我已经尝试过使用 NgZone 等，但我唯一能够始终如一地工作的是将导航放在任何异步代码之外。我很想找到解决办法。

【参考方案1】：

这应该可以解决您的问题。

import  Component, NgZone  from '@angular/core';

constructor(public router: Router, public _zone: NgZone) 

然后在你的回调中，调用它

this._zone.run(()=>
  this.router.navigate(['uploader']);
);

【参考方案2】：

感谢this auth0 article 我找到了解决问题的方法，因为NgZone 不适合我。

将请求包装在 bindNodeCallback 中就可以了。 此函数使用 Zone.js 包装 Auth0 请求，从而在 Angular 区域中执行请求。

我的代码是：

this._auth0.parseHash((err, authResult: auth0.Auth0DecodedHash) => 
    if (!err && authResult && authResult.accessToken && authResult.idToken) 
       window.location.hash = ''; // Remove the Auth0 trailing hash
    

    this.ngZone.run(() => 
       this.router.navigate(['<some-url>']);
    );
);

但是由于超出了 Angular 范围，导致无法导航到任何页面。我用 Zone.js 包装的版本替换了该代码以使其工作：

this.parseHash$ = bindNodeCallback(this._auth0.parseHash.bind(this._auth0));
this.parseHash$().subscribe(() => this.router.navigate(['<some-url>']));

可以在subscribe 或map 函数中编辑请求结果。

---

版本

对于上面的代码，我使用以下版本：

角度 6.1.7

auth0-js 9.8.0

【讨论】：

这看起来确实是一个晦涩难懂的解决方案。如果它实际上可以访问 this.router 属性，我看不出对 ngZone.run 的调用是如何“超出范围”的。

嘿，我遇到了同样的问题...试图遵循您的最终解决方案，但我不清楚回调代码的去向。我可以确认 NgZone 解决方案不起作用。你能发布你的解决方案的完整代码吗？

嗨@user1543276，我不再从事该项目，因此无法发布确切的代码，但您可以在此处找到我遵循的示例代码：auth0.com/docs/quickstart/spa/angular2/…