angular - 如何在http请求角度添加令牌

Question

我正在尝试使用 angluar 和 spring boot 进行登录。我使用 JWT 身份验证，在成功进行身份验证后，我得到了令牌作为响应。提交登录后，我将重定向到另一个 url，但我需要将不记名令牌添加到 url 中，否则它会返回匿名用户。我是 Angular 新手，请告诉我如何将令牌添加到请求中。

登录服务

loginUser(data: Student): Observable<any> {
    const url = '/login';
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/text; charset=utf-8');
    return this.httpClient.post(this.serverUrl + url, data, {responseType: 'text' as 'json'});
}

getuserInfo(): Observable<any> {
    const url = '/userinfo';
    return this.httpClient.get(this.serverUrl + url);
}

登录表单提交

登录表格

submitForm(submission: any): void {
    console.log(submission);
    if (submission && submission.submit) {
        delete submission.submit;
    }
    this.loginService.loginUser(submission)
        .subscribe(result => {
            console.log(result);
            this.userinfo();
        }, err => {
            alert(err);
        });
}

userinfo() {
    this.loginService.getuserInfo()
    .subscribe(result => {
        console.log(result);
    }, err => {
        alert(err);
    });
}

如何在用户信息中添加此令牌，请帮助我。

标签： angularspringjwt

Answer 1

将您的令牌存储在 localStorage 中：

localStorage.setItem('token', 'yourToken');

并使用拦截器在请求中设置令牌：

@Injectable({
    providedIn: 'root'
})
export class UserEmulationInterceptor implements HttpInterceptor {

    private readonly token: string;

    constructor() {
        this.token = localStorage.getItem('your_sso_token');
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (this.token) {
            const modReq = req.clone({
                setHeaders: {
                    'your_sso_token': this.token
                }
            });
            return next.handle(modReq);
        }
        return next.handle(req);
    }
}