时间戳

首页 > 解决方案 > 使用 authService 登录后组件不会隐藏

angular - 使用 authService 登录后组件不会隐藏

问题描述

当有人登录时，我正在尝试使登录和注册链接从导航栏中消失。我正在关注 Youtube 上的教程来解决此问题，但它不起作用。

    <li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a  [routerLink]= "['/dashboard']">Dashboard</a> </li>
          <li *ngIf="authService.loggedIn()" [routerLinkActive]="['active'] " [routerLinkActiveOptions] = "{exact:true}"><a  [routerLink]= "['/profile']">Profile</a></li>
          <li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a  [routerLink]= "['/login']">Login</a></li>
          <li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"> <a  [routerLink]= "['/register']">Register</a></li>
          <li *ngIf="authService.loggedIn()"><a (click)="onLogOutClick()" href="#">Logout</a></li>

此时它一直隐藏注销和配置文件，在我登录时不会出现。

Auth.service.ts 看起来像这样：

import { Http, Headers } from '@angular/http';
import { map } from 'rxjs/operators';
import { tokenNotExpired } from 'angular2-jwt';


@Injectable()
export class AuthService {
authToken: any;
user: any;

  constructor(private http: Http) { }

  registerUser(user){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post('http://localhost:3000/users/register', user, {headers: headers})
    .pipe(map(res => res.json()));
  }

  authenticateUser(user){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post('http://localhost:3000/users/authenticate', user, {headers: headers})
    .pipe(map(res => res.json()));
  }

  storeUserData(token, user){
    localStorage.setItem('id_token', token);
    localStorage.setItem('user', JSON.stringify(user));
    this.authToken = token;
    this.user = user;
  } 

  loggedIn(){
    return tokenNotExpired();
  }
  logout(){
    this.authToken = null;
    this.user = null;
    localStorage.clear();
  }

  getProfile(){
    let headers = new Headers();
    this.loadToken();
    headers.append('Authorization', this.authToken);
    headers.append('Content-Type', 'application/json');
    return this.http.get('http://localhost:3000/users/profile', {headers: headers})
    .pipe(map(res => res.json()));
  }

  loadToken(){
    const token = localStorage.getItem('id_token');
    this.authToken = token;
  }
}

标签： angulartypescript

解决方案

请在函数中使用token而不是。id_tokenstoreUserData

查看详细的解释信息

推荐阅读