如何实现配置文件

Question

我有一个基于令牌的授权。授权进行得很好，没有错误。但现在需要以某种方式显示授权用户的数据。请告诉我如何在客户端(Angular 6(上正确实现配置文件？我有这个服务器：

控制器：

const db = require('../config/db.config.js')
const User = db.user
const errorHandler = require('../utils/errorHandler')
module.exports.getProfile = async function(req, res) {
try {
await User.findOne({ id: req.user.id}, (user) => {
res.json({
success: true,
user: user,
message: "Successful"
}) 
})
}catch(e) {
errorHandler(req, e)
}
}

路线：

const express = require('express')
const router = express.Router()
const controller = require('../controllers/user')
const passport = require('passport')
router.get('/profile', passport.authenticate('jwt', {session: false}), controller.getProfile)
module.exports = router

护照：

const JwtStrategy = require('passport-jwt').Strategy
const ExtractJwt = require('passport-jwt').ExtractJwt
const db = require('../config/db.config.js')
const User = db.user

const options = {
jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), 
secretOrKey: process.env.SECRET_OR_KEY
}
module.exports = passport => {
passport.use(
new JwtStrategy(options, async (payload, done) => {
try {
const user = await User.findById(payload.userId).toJSON('username id')
if (user) {
done(null, user)
} else {
done(null, false)
}
} catch(e) {
console.log(e)
}
})
)
}

这是客户的一部分：

应用程序组件：

import { Component, OnInit } from '@angular/core';
import { AuthService } from './shared/services/auth.service';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
constructor(private auth: AuthService) {
}
ngOnInit() {
const potentialToken = localStorage.getItem('auth-token')
if (potentialToken !== null) {
this.auth.setToken(potentialToken)
}
}
}

auth.service:

import { Injectable, Optional } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Router, ActivatedRoute } from "@angular/router";
import { Observable } from "rxjs";
import { tap } from "rxjs/operators";
import { User } from "../interfaces";
@Injectable({
providedIn: 'root'
})
export class AuthService {
private token = null;
constructor(
private http: HttpClient,
@Optional() private _activatedRoute: ActivatedRoute,
@Optional() private _router: Router
) {}
login(user: User): Observable<{token: string}> {  
return this.http.post<{token: string}>('/api/auth/login', user)
.pipe(
tap(
({token}) => {
localStorage.setItem('auth-token', token)   
this.setToken(token)                     
}
)
)
}
setToken(token: string) {
this.token = token
}
getToken(): string {
return this.token
}

isAuthenticated(): boolean {
return !!this.token
}
logout() {
this.setToken(null) 
localStorage.clear()
}
}

token.interreceiver.ts:

import { Injectable } from "@angular/core";
import { AuthService } from "../services/auth.service";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { catchError } from "rxjs/operators";
import { Router } from "@angular/router";
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(private auth: AuthService, private router: Router){
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (this.auth.isAuthenticated()) {
req = req.clone({
setHeaders: {
Authorization: this.auth.getToken()
}
})
}
return next.handle(req).pipe(
catchError(
(error: HttpErrorResponse) => this.handleAuthError(error)
)
)
}
private handleAuthError(error: HttpErrorResponse): Observable<any> {
if (error.status === 401) {
this.router.navigate(['/sign_in']), {
queryParams: {
sessionFailed: true
}
}
}
return throwError(error)
}
}

需要在客户端上实现什么来显示用户数据。请告诉我，我是新来的。

Answer 1

您只需要创建一个名为UserService的服务类，它将保留与登录用户相关的信息。

每当成功执行登录操作时，只需获取用户详细信息并将其填写在UserService类中即可。

user.service.ts

export class UserService {
private currentUser$: new BehaviorSubject<User>; //<-- check your user type 
constructor(private http: Http) { }
getCurrentUser() {
this.currentUser$;
}
setCurrentUser(user:User){
this.currentUser$.next(user); //update the current user
}
}

这个服务类将提供Observable，您可以使用任何组件或服务类。