Question

我有一个基于令牌的授权。授权进行得很好，没有错误。但是现在需要以某种方式显示授权用户的数据。请告诉我如何在客户端上正确实现配置文件（角度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)
    }
  }
}

身份验证服务：

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.interceptor.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，您可以将其用于任何组件或服务类。

如何实施个人资料？

1 个答案:

user.service.ts