angular2 router.navigate 在 auth0 回调中 [英] angular2 router.navigate inside auth0 callback
本文介绍了angular2 router.navigate 在 auth0 回调中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在 auth0lock 的回调中调用 router.navigate 后呈现模板时遇到问题
I am having an issue rendering a template after calling router.navigate inside a callback for auth0lock
登录组件.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
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 的回调有效,我可以读取变量.非常感谢任何建议.
I am including the cdn script for authlock in my index page. Seems like any route I navigate to after login does not render. The callback from this.lock.show works and I can read the variables. Any advice is greatly appreciated.
基本概念:https://plnkr.co/edit/Oz8lY7v6q8GpH71WLtAK
推荐答案
这应该可以解决您的问题.
This Should fix your problem.
import { Component, NgZone } from '@angular/core';
constructor(public router: Router, public _zone: NgZone) {}
然后在你的回调中,调用这个
then inside your callback , call this
this._zone.run(()=>{
this.router.navigate(['uploader']);
});
这篇关于angular2 router.navigate 在 auth0 回调中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文