Question

如果用户未经过身份验证，我可以隐藏一个链接...

<a [routerLink]="['/anticipos']"> Subidas</a>

如果我使用此指令，我可以看到链接是否处于活动状态（在浏览器中）

<a routerLinkActive="active" [routerLink]="`enter code here`['/anticipos']"> Subidas</a>

但我需要知道，如果用户经过身份验证或者他是管理员（基于角色），是否可以激活link / solicitud / crear /

这是我如何配置app.module.ts上的后卫

    RouterModule.forRoot([
      {path:'anticipos', component:AnticipoListComponent, canActivate: [AuthGuard]},

    ])
{path:'anticipos', component:AnticipoListComponent, canActivate: [AuthGuard]},

Answer 1

我使用了* ngIf指令

我检查了令牌是否已经建立，如果有令牌..我显示项目..如果未设置令牌，则项目被隐藏

<a *ngIf="_autenticacionService.token" [routerLink]="['/anticipos']"> Subidas</a>

这是我的身份验证类

import {Injectable} from '@angular/core';
import {Http, Response, URLSearchParams} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';    
import 'rxjs/add/operator/catch';        


import{ IAutenticacion } from './autenticacion';

@Injectable()
export class AutenticacionService{

    private _autenticacionUrl = "http://localhost:8000/login";
    public token=0;

    constructor(private _http: Http){
        // set token if saved in local storage
        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
        this.token = currentUser && currentUser.token;
    }
    private handleError(error: Response){
        console.error(error);
        return Observable.throw(error.json().error || "Server error");
    }

    login (body: IAutenticacion): Observable<boolean> {
        let bodyString = JSON.stringify(body); // Stringify payload
        //let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
        //let options       = new RequestOptions({ headers: headers }); // Create a request option

        return this._http.post(this._autenticacionUrl, body) // ...using post request
                         .map(
                             (res:Response) => {
                                 let token = res.json() && res.json().token;
                                 if (token) {
                                     // set token property
                                    this.token = token;
                                    // store username and jwt token in local storage to keep user logged in between page refreshes
                                    localStorage.setItem('currentUser', JSON.stringify({ usuario: body.usuario, token: token }));
                                    // return true to indicate successful login
                                    return true;
                                 }else{
                                     return false;
                                 }
                             },
                         ) // ...and calling .json() on the response to return data
                         .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
    }  

    logout(): void {
        // clear token remove user from local storage to log user out
        this.token = null;
        localStorage.removeItem('currentUser');
    }
}

如果你想检查用户是否是管理员，我认为你可以在Authentication类中添加一个新的var并检查模板中该变量是否为真

Answer 2

对于迟到的回复感到抱歉 - 我遇到了同样的问题并找到了可能的解决方案。

我使用角度注射器来获得防护，然后我称之为激活方法。

  constructor(
    private injector: Injector) {
  }
  shouldDisplayRoute(route: Route) {
    if (!(route.path && route.path.indexOf(':') < 0))
      return false;
    if (!route.canActivate)
      return true;
    for (let guard of route.canActivate) {
      let g = this.injector.get(guard) as CanActivate;
      if (g && g.canActivate) {
        var r = new dummyRoute();
        r.routeConfig = route;
        let canActivate = g.canActivate(r, undefined);
        if (!canActivate)
          return false;
      }
    }
    return true;
  }

}

class dummyRoute extends ActivatedRouteSnapshot {
  constructor() {
    super();

  }
  routeConfig;
}

如果可以激活路线，则显示链接

2 个答案: