Question

我想隐藏在导航栏的“个人资料”项中。只有具有“管理员”角色的用户才能看到此信息。我已经阻止了个人资料路由，只有管理员不能激活它。

目前，它可以正常工作，因此没有人看到（甚至是管理员）“个人资料”，但是如果我输入“个人资料”（本地主机/个人资料（只有管理员可以访问）），它将开始正常工作，并且用户可以在菜单“个人资料”中看到具有管理员角色的人。

navbar.component.ts

export class NavbarComponent implements OnInit {

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

  ngOnInit() {
  }

  onLogoutClick() {
    this.authService.logout();
    this.flashMessage.show('You're logged out', {
      cssClass: 'alert-success', timeout: 3000
    });
    this.router.navigate(['/login']);
    return false;
  }
}

navbar.component.html

<li class="nav-item" *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}">
            <a class="nav-link" [routerLink]="['/dashboard']">Dashboard<span></span></a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item" *ngIf="authService.adminloggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}">
            <a class="nav-link" [routerLink]="['/profile']">Profile </a>
          </li>
          <li class="nav-item" *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}">
            <a class="nav-link" [routerLink]="['/login']">Log in</a>
          </li>

auth.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { HttpModule } from '@angular/http';
import 'rxjs/add/operator/map';
import { tokenNotExpired } from 'angular2-jwt';

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

  constructor(private http: Http) {}



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

  checkRole(role) {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.get('http://localhost:8080/users/checkRole/' + role, {
        headers: headers
      })
      .map(res => res.json());
  }

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

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

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

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

  loggedIn() {
    return tokenNotExpired('id_token');
  }
  adminloggedIn() {
    if (this.role === 'admin') {
      return true;
    } else {
      return false;
    }
  }

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

功能!authService.loggedIn()也可以正常工作authService.loggedIn() 但是authService.adminloggedIn()不起作用看起来只有在输入/ Profile

后才开始

如果用户不是管理员，如何从导航栏隐藏项目

0 个答案: