javascript - angular 2 显示/隐藏路由器导出并重定向到 html 页面

Question

我创建了一个简单的应用程序。我有位于不同域的 AD Windows 身份验证 Web API，因此我启用了 cors。我创建了一个 api 峰值，并在未授权时返回 401。

app.service.ts

authenticateUser(): Observable<any> {
        return this.http.get("http://localhost:36655/", { withCredentials: true })
            .map(this.extractData)
            .catch(this.handleError);
    }

app.component.ts

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent {

    constructor(appService: AppService) {
        appService.authenticateUser()
            .subscribe(response => {

                //do something here because its not 401
            },
            error => {
                if (error.indexOf("401") >= 0)
                    console.log("Redirect to contact page")
                else {

                }
            });
    }
}

有两件事让我很纠结

1. 如何隐藏 Router-Outlet(原因是我不想显示我的主页/链接)
2. 我可以在主 div 上使用 [hidden] 隐藏它，但是我该如何重定向？因为<router-outlet></router-outlet>将是隐形的

app.component.html

<div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <a class="navbar-brand" [routerLink]="['']">Home</a>
            <ul class="nav navbar-nav">
                <li><a [routerLink]="['/factory']" id="factory" name="factory">Factory</a></li>
                <li><a [routerLink]="['/supplier']" id="supplier" name="supplier">Supplier</a></li>
                <li><a [routerLink]="['/businessarea']" id="businessArea" name="businessArea">Business Area</a></li>
            </ul>
        </div>
    </nav>
    <router-outlet></router-outlet>
</div>

我有访问所有或无访问权限的身份验证，这就是我不想显示任何内容的原因。有没有类似的东西

router.navigate('../shared/contact.html') ？

编辑 1:

app.component.ts

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent {
    private isAuthenticated: boolean = false;

    constructor(private authService: AuthService) {
        this.authService.authenticateUser()
            .subscribe(response => {
                if (response.status == 200)
                    this.isAuthenticated = true;
            },
            error => {
                if (error.indexOf("401") >= 0)
                    this.isAuthenticated = false;
            });
    }
}

authguard.ts

@Injectable()
export class AuthGuard implements CanActivate {

    private isActive: boolean = true;
    constructor(private authService: AuthService, private router: Router) {
    }

    canActivate(): boolean {
        this.authService.authenticateUser()
            .subscribe(() => {},
            error => {
                if (error.indexOf("401") >= 0) {
                    let link = ['contactus'];
                    this.router.navigate(link);
                    this.isActive = false;
                }
            });
        return this.isActive;
    }
}

auth.service.ts

@Injectable()
export class AuthService {  
    constructor(private http: Http) {

    }

    authenticateUser(): Observable<any> {
        return this.http.get("http://localhost:5002/api/v1/authenticate", { withCredentials: true })
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(response: Response) {
        let body = response;
        return body || {};
    }

    private handleError(error: Response) {
        let errMsg: string;
        if (error instanceof Response) {
            errMsg = `${error.status} - ${error.statusText || ''}`;
        } else {
            errMsg = error.toString();
        }
        return Observable.throw(errMsg);
    }
}

app.component.html

<div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <a class="navbar-brand" [routerLink]="['']">Ethos</a>
            <ul class="nav navbar-nav" *ngIf="isAuthenticated">
                <li><a [routerLink]="['/factory']" id="factory" name="factory">Factory</a></li>
                <li><a [routerLink]="['/supplier']" id="supplier" name="supplier">Supplier</a></li>
                <li><a [routerLink]="['/businessarea']" id="businessArea" name="businessArea">Business Area</a></li>
            </ul>
        </div>
    </nav>
    <div>
        <router-outlet></router-outlet>
    </div>
</div>

app.routes.ts

const routes: Routes = [
    {
        path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard]
    },
    { path: 'factory', component: FactoryFormComponent, canActivate: [AuthGuard]},
    //...some other
    { path: 'contactus', component: ContactUsComponent }
];

AuthenticateController.cs

public HttpResponseMessage Get()
        {
            return User.Identity.IsAuthenticated ? new HttpResponseMessage(HttpStatusCode.OK) : new HttpResponseMessage(HttpStatusCode.Unauthorized);
        }

我可以很好地隐藏菜单，但 homeComponent 是搜索文本框，在身份验证之前呈现，我想隐藏所有内容，只想显示 Logo 。不应显示工厂文本框的搜索，底部有 gridview 之类的数据，我没有在此图片中显示。

它不会重定向，直到单击取消...另一种解决方案就像我隐藏了我在 homeComponent 上执行的菜单一样，但是有很多 authService 调用，我猜这并不优雅

Answer 1

在 Angular 2 路由中，你有 'CanActivate' 和 'CanActivateChild' 属性。这可用于在呈现组件之前进行授权。

您可以在这里找到用法:https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

在您的情况下，您不必移除路由器 socket 。

改为:

1. 仅添加 <router-outlet></router-outlet>在你的 app.component.html 中。

2. 提供2条路线

   1. 需要授权的主要组件的默认路由。

   2. 与 contact.html 链接的联系人组件的单独路由 (/contact)。

      在app模块中引入RouterModule来添加路由。
      示例:

      RouterModule.forRoot([
      {
          path: '',
          canActivate: [AuthGuard] //provide the Injectable class here to authenticate.
          component: MainComponent
      },
      {
          path: 'contact',
          component: ContentComponent
      }
      ])

3. 创建一个@Injectable 类作为对用户进行身份验证的守卫。这将调用应用程序服务来验证用户并在未经授权的情况下重定向到联系人组件。您可以使用 this.router.navigate(['contact']);从“@angular/router”导入路由器

4. 将这个新的@Injectable 类添加为默认路由的 CanActivate 属性。