0

我对组件进行了以下设置。
Boot.ts
|__Home.ts
|__Aboutus.ts
|__contactus.ts

引导.ts 

directives:[AuthOutlet,HomeCmp,ROUTER_DIRECTIVES,ClientCmp,AboutUsCmp,Login],
template: `
            <auth-outlet></auth-outlet>
          `
@RouteConfig([
  {path:'/Home', name: 'Home', component: HomeCmp, useAsDefault: true}
  {path:'/AboutUs', name: 'AboutUs', component: AboutUsCmp}
  {path:'/Clients', name: 'Client', component: ClientCmp}
  {path:'/Login', name: 'Login', component: Login}
])

authOutlet.ts

import {Directive, Attribute, DynamicComponentLoader, ElementRef} from 'angular2/core';
import {RouterOutlet, Router, ComponentInstruction, RouteData } from 'angular2/router';
import {AuthService} from 'Angular/src/authService.ts';
import {Login} from 'Angular/src/Login/login.ts';

@Directive({
    selector: 'auth-outlet'
})
export class AuthOutlet extends RouterOutlet {
  publicRoutes: any;
  private parentRouter: Router;
  private authService: AuthService;
  constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader, _parentRouter: Router,
      @Attribute('name') nameAttr: string, _authService: AuthService) {

      super(_elementRef, _loader, _parentRouter, nameAttr);
      this.parentRouter = _parentRouter;
      this.authService = _authService;
      this.publicRoutes = {
          '/AboutUs': true,
          '/Home':true
      };
  }
   activate(oldInstruction: ComponentInstruction) {
        console.log(this.parentRouter);

        // here I get this.parentRouter object.

        var url = this.parentRouter.lastNavigationAttempt;
      ________________________________________________________________
      here I get blank url because  lastNavigationAttempt is always " " (blank).
      ___________________________________________________________
      I want to have some value in url so further I can do something.
      ________________________________________________________________
      I can't figure out what is the problem and why????Is anything missing?
      _______________________________________________________________

        console.log('redirecting to '  + url);
        var user=JSON.parse(localStorage.getItem('UserData');
        console.log('User Data');
        console.log(user);
        console.log(this.publicRoutes[url]);
        if(user!=null)
        {
            if (!this.publicRoutes[url] && !user.loggedIn){
                var newInstruction = new ComponentInstruction('Login', [], new RouteData(), Login, false, 1);
                console.log(newInstruction);
                return super.activate(newInstruction);
            } else {
            console.log(oldInstruction);
                return super.activate(oldInstruction);
            }
        }
        else
        {
              console.log('Outlet - bye bye logout');
               var newInstruction = new ComponentInstruction('Login', [], new RouteData(), Login, false, 1);
                console.log(newInstruction);
                return super.activate(newInstruction 
        }
    }
}

如果我开始获取 url 值，那么我可以在IF下面某处使用的条件下使用它。还有其他方法吗？或者我应该怎么做才能获得那个 url 值？

4

2 回答 2

0

在我的团队中，我们还采用了自定义路由器出口方法来实现私有/受保护的路由。我们的实现基于用户@Blacksonic 在许多答案和博客文章中给出的示例。一个例子是这个SO answer，其中核心方法类似于：

activate(instruction: ComponentInstruction) {
  if (this.applyYourAuthLogicHere(instruction.urlPath)) {
    return super.activate(instruction);
  }

  this.parentRouter.navigate(['Your-Login-Route-Name']);
}

虽然我必须标记一个警告：这适用于 Angular betas，pre RC1。RC1 发布后，路由器的实现似乎发生了一些变化，所以我不确定用于自定义的路由器插座 API 是否仍然相同。

于 2016-05-27T23:10:05.150 回答
0

您得到一个空白网址，因为您可能正在访问您的应用程序的根目录。

lastNavigationAttempt 尚未记录（https://angular.io/docs/ts/latest/api/router/Router-class.html），但据我所知，在您的 Web 应用程序中导航时它没有更新。但是，它在通过 url 导航时会更新。

使用 CanActivate 装饰器（https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html）可能是个好主意。CanActivate 可以在初始化之前确定组件是否可访问。

它是一个装饰器，你可以像这样使用它：

@Component({
    selector: 'client', 
    template: `<h1>Client</h1>`
})

@CanActivate(isLoggedIn())

class ClientCmp {
    ...
}
于 2016-02-24T10:35:25.807 回答