Question

我开始学习有关角度2的所有信息并且目前有问题。我在我的应用程序中定义了这些路由：

const appRoutes: Routes = [
  {path: 'start',
    component: StartComponent,
    children:[{path: '' },
      {
        path:'nested', component:NestedTestComponent
      }
    ]},
  {path: '', component:LoginFormComponent}
];

在用户输入凭据（并且它们是正确的）之后，存在显示登录表单的“基本”路径，用户将被定向到“开始”并且这被作为嵌套路由“嵌套”。这非常有效。但是如果用户没有登录，我想以某种方式限制用户访问“开始”和“嵌套”。因为目前只需将其作为网址输入即可。

我的index.html如下所示：

<body>
  <app-root>Loading...</app-root>
</body>

app.component：

@Component({
  selector: "app-root",
  template: `
        <router-outlet></router-outlet>
        `,
  styleUrls: ['./app.component.css']
})

start.component

<nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center"></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a (click)="logout()">Logout</a></li>
      </ul>
    </div>
  </nav>
  <router-outlet></router-outlet>

因为我的方法中的所有内容都以某种方式嵌套，所以如果用户使用此方法登录，则检查app.component：

export class AppComponent {



  constructor(af:AngularFire, router:Router){
    if(af.auth.getAuth() == null){
      //redirect to start
      console.log('redirect to login');
      router.navigate(['']);
    }else{
      console.log('not redirect to login');
    }
  }
}

这可以正常检测是否应该重定向用户。但是，router.navigate(['']);不起作用。它什么也没做。

Answer 1

使用CanActivate，您可以允许用户只有在路线中激活页面或将其重定向到登录时才能访问页面。

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CanActivateAuthGuard } from './auth.service'

import { MyComponent } from './app.component';

const routes: Routes = [
    { path: '/home', component: MyComponent , canActivate: [CanActivateAuthGuard]}]

/ 在身份验证服务中 /

import { CanActivate, Router } from '@angular/router';

@Injectable()
export class CanActivateAuthGuard implements CanActivate {
  constructor(private router: Router) {}
    if (this.authService.isLoggedIn()) {
        return true;
    }
    //Redirect the user before denying them access to this route
    this.router.navigate(['/login']);
    return false;
}

angular2 - 检查用户登录

1 个答案: