5

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

登录组件.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});
    }
}

主页组件.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

4

2 回答 2

3

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

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

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

然后在你的回调中，调用这个

this._zone.run(()=>{
  this.router.navigate(['uploader']);
});
于 2017-05-16T12:37:30.827 回答
2

感谢这篇 auth0 文章，我找到了解决问题的方法，因为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

于 2018-10-12T09:21:40.150 回答