Angular + Node-如何使用Auth Guard检查经过身份验证的用户 [英] Angular + Node - How to check for authenticated user using Auth Guard

问题描述

我正在尝试通过向存在jwt标头的后端api发出请求来检查使用情况是否已通过身份验证.如果他们是用户，则返回该用户；否则，将返回未授权的用户.

I am trying to check if the using is Authenticated by making a request to the back-end api with the jwt headers present. If they are the user is returned if not it will return unauthorized.

我的问题是auth.guard被触发并在console.log中返回undefined，因为auth.service尚未完成查询.

The problem i have is the auth.guard is fired and returns undefined in the console.log because the auth.service has not finished querying.

auth.guard.ts

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Injectable()
export class AuthGuard implements CanActivate {


  constructor(private authService: AuthService, private router: Router) { }


  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    console.log(this.authService.isAuthenticated());

    if (this.authService.isAuthenticated()) {
      return true;
    }

    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false

  }
}

auth.service.ts

auth.service.ts

import { JwtService } from './jwt.service';
import { Injectable } from '@angular/core';
import { ApiService } from './api.service';
import { UserService } from './user.service';

@Injectable()
export class AuthService {

  user: any;

  constructor(
    private apiService: ApiService,
    private jwtService: JwtService,
    private userService: UserService) {


      this.getAuthenticatedUser().subscribe(res => {
        console.log(res);
        this.user = res;
      }, (error) => {
        this.user = null;
      });


  }

  login(credentials) {

    let endpoint = 'auth/'

    return this.apiService.post(endpoint, credentials)
      .map(res => {
        this.jwtService.saveToken(res.data.jwtToken);
        window.localStorage.setItem('user_id', res.data.user._id);
      });
  }

  logout() {

  }


  isAuthenticated() {
    return this.user;
  }

  getAuthenticatedUser() {

    let endpoint = 'auth/'

    return this.apiService.get(endpoint);
  }

}

什么是实现这一目标的最佳方法?

Whats is the best implementation here to achieve this?

推荐答案

您可以通过添加本地存储会话来简化此操作.用户通过身份验证后，您可以将令牌存储在本地存储中，并在authguard服务中可以检查状态.

You could simplify this by adding a localstorage session. Once the user is authenticated you can store the token in localstorage and in authguard service you can check the status.

例如:

您可以使用以下登录用户信息创建一个类，

You could create a class with login user info as follows,

export class LoginInfo {
    username: string;
    role: string;
    token: string;
    isLoggedIn: boolean;
}

以及您的 authservice.ts

and in your authservice.ts

 login(username: string, password: string): Observable<LoginInfo> {
        const url = `${environment.apiUrl}/token`;
        const params = 'username=' + username + '&password=' + password + '&grant_type=password';
        const headers = new Headers({
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        });
        return this.http.post(url, params, { headers: headers, withCredentials: true })
            .map((response: Response) => {
                console.log(response);
                const token = response.json() && response.json().access_token;
                if (token) {
                    this.tokenInfo = this.decodeToken(token);
                    this.loggedInfo = new LoginInfo();
                    this.loggedInfo.role = this.tokenInfo.Role;
                    this.loggedInfo.token = token;
                    this.loggedInfo.username = username;
                    this.loggedInfo.isLoggedIn = true;
                    localStorage.setItem('token', token);
                    localStorage.setItem('loggedInfo', JSON.stringify(this.loggedInfo));
                    return this.loggedInfo;
                } else {
                    return this.loggedInfo;
                }
            },
            err => console.log(err));
    }

和您的 auth-guard.service.ts

and in your auth-guard.service.ts

您可以简单地检查令牌并在令牌不存在的情况下重定向到登录

you can simply check the token and redirect to login if the token is not present

canActivate() {
    if (localStorage.getItem('loggedInfo')) {
        return true;
    }
    this.router.navigate(['/login']);
    return false;
}

这篇关于Angular + Node-如何使用Auth Guard检查经过身份验证的用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！