身份验证后，需要刷新页面才能在 Angular 中获取令牌和用户配置文件

Question

所以我的SPA应用程序是用角度写的。我正在使用 auth0 进行身份验证。当我单击"登录"时，我重定向到我正在使用谷歌帐户登录的 auth0 页面，然后我重定向到我的角度应用程序。 问题是我需要刷新页面以获取用户配置文件信息或访问令牌。我在导航栏中有一个用户信息"昵称和头像"，所以我需要在返回页面后直接获取这些信息。

我尝试在很多地方放置handleauthentication()方法，与getUserProfile()方法相同。

所以这是我的身份验证服务

import { Injectable } from '@angular/core';
import * as auth0 from 'auth0-js';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class AuthService {
userProfile: any;
public  auth0 = new auth0.WebAuth({
clientID: environment.clientID,
domain: environment.domain,
responseType: environment.responseType,
audience: environment.audience,
redirectUri: environment.redirectUri,
scope: environment.requestedScopes
});

constructor(private router: Router) {
}
public getProfile(cb): void {
const accessToken = localStorage.getItem('access_token');
if (!accessToken) {
throw new Error('Access Token must exist to fetch profile');
}
const self = this;
this.auth0.client.userInfo(accessToken, (err, profile) => {
if (profile) {
self.userProfile = profile;
console.log(self.userProfile);
}
cb(err, profile);
});
}
public login() {
this.auth0.authorize();
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
window.location.hash = '';
this.setSession(authResult);
this.router.navigate(['/home']);
} else if (err) {
this.router.navigate(['/error']);
console.log(err);
alert('Error: ${err.error}. Check the console for further details.');
}
});
}
private setSession(authResult): void {
const expiresAt = JSON.stringify(authResult.expiresIn * 1000 + new Date().getTime());
const scopes = authResult.scope || environment.requestedScopes || '';
localStorage.setItem('access_token', authResult.accessToken);
localStorage.setItem('id_token', authResult.idToken);
localStorage.setItem('expires_at', expiresAt);
localStorage.setItem('scopes', JSON.stringify(scopes));
console.log(localStorage.getItem('access_token'));
}


public logout(): void {
localStorage.removeItem('access_token');
localStorage.removeItem('id_token');
localStorage.removeItem('expires_at');
localStorage.removeItem('scopes');
this.router.navigate(['/']);
}
public isAuthenticated(): boolean {
const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
return new Date().getTime() < expiresAt;
}
public userHasScopes(scopes: Array<string>): boolean {
const grantedScopes = JSON.parse(localStorage.getItem('scopes')).split(',');
return scopes.every(scope => grantedScopes.includes(scope));
}
public renewToken() {
this.auth0.checkSession((err,result) => {
if(!err){
this.setSession(result);
}
})
}
}

我的应用组件

import { PostService } from './services/post.service';
import { ProfileService } from './services/profile.service';
import { Component, OnInit } from '@angular/core';
import { AuthService } from './services/auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'SchoolGit';
constructor(public auth: AuthService, private postService: PostService) {
auth.handleAuthentication();
}
ngOnInit() {
this.postService.getMessage();
}
}

和我的导航栏 TS

import { ProfileService } from './../../services/profile.service';
import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
profile: any;
constructor(private auth: AuthService) { }
ngOnInit() {
if (this.auth.userProfile) {
this.profile = this.auth.userProfile;
} else {
this.auth.getProfile((err, profile) => {
this.profile = profile;
});
}
}
login(): void {
this.auth.login();
}
logout(): void {
this.auth.logout();
}
isAuthenticated(): boolean {
return this.auth.isAuthenticated();
}
}

我的回调组件为空

我需要在重定向到角度应用程序后获取用户配置文件，而不是在单击刷新后。

Answer 1

Hy 使用 BehaviorSubject 将直接数据提取到导航栏中，例如

public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
this.getUserManagmentProfile();
const returnURL = localStorage.getItem('PM_ReturnUrl');
if (returnURL) {
this.router.navigate([returnURL]);
} else { this.router.navigate(['/dashboard']); }
} else if (err) {
this.router.navigate(['/login']);
}
this.getProfile(null);
});
}
getUserManagmentProfile() {
if (this.isAuthenticated()) {
this.userService.getUserProfile.subscribe(result => {
const profile = result as any;
this.languageService.setLanguage(profile.locale);
});
}
}