根据登录状态使用路由器重定向用户 [英] Redirect user with router depending on logged in status

问题描述

如果用户未登录，我想自动路由到登录页面.

I would like to automatically route to a login page if the user is not logged in.

import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashBoardComponent} from './dashboard/dashboard.component';
import { NotFoundComponent } from './not-found/not-found.component';

const APPROUTES: Routes = [
  {path: 'home', component: AppComponent},
  {path: 'login', component: LoginComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: '**', component: NotFoundComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot(),
    RouterModule.forRoot(APPROUTES)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

如果用户未登录，则应加载 LoginComponent，否则加载 DashboardComponent.

If the user isn't logged in, the LoginComponent should load, otherwise the DashboardComponent.

推荐答案

这里有 3 种方法可以满足您的要求，从最不喜欢到最喜欢:

Here are 3 ways to do what you asked, from least preferred to favorite:

选项 1. 在 AppComponent

@Component({
  selector: 'app-root',
  template: `...`
})
export class AppComponent {
  constructor(authService: AuthService, router: Router) {
    if (authService.isLoggedIn()) {
      router.navigate(['dashboard']);
    }
  }
}

不太好.最好在其所属的路由声明中保留需要登录"信息.

Not very good. It's better to keep the "login required" information in the route declaration where it belongs.

选项 2. 使用 CanActivate 保护

Option 2. Use a CanActivate guard

为所有需要用户登录的路由添加一个CanActivate保护:

Add a CanActivate guard to all the routes that require the user to be logged in:

const APPROUTES: Routes = [
  {path: 'home', component: AppComponent, canActivate:[LoginActivate]},
  {path: 'dashboard', component: DashBoardComponent, canActivate:[LoginActivate]},
  {path: 'login', component: LoginComponent},
  {path: '**', component: NotFoundComponent}
];

我的守卫叫LoginActivate.

为了让它工作，我必须将守卫添加到我的模块的providers.

For it to work I must add the guard to my module's providers.

然后我需要实施它.在这个例子中，如果用户没有登录，我将使用守卫重定向用户:

And then I need to implement it. In this example I'll use the guard to redirect the user if they're not logged in:

@Injectable()
export class LoginActivate implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    if (!this.authService.isLoggedIn()) {
      this.router.navigate(['login']);
    }
    return true;
  }
}

如果这没有意义，请查看关于路由守卫的文档:https://angular.io/docs/ts/latest/guide/router.html#guards

Check out the doc about route guards if this doesn't make sense: https://angular.io/docs/ts/latest/guide/router.html#guards

这个选项更好，但不是超级灵活.如果我们需要检查登录"以外的其他条件(例如用户权限)怎么办?如果我们需要向守卫传递一些参数，例如角色名称admin"、editor"...怎么办?

This option is better but not super flexible. What if we need to check for other conditions than "logged in" such as the user permissions? What if we need to pass some parameter to the guard, like the name of a role "admin", "editor"...?

选项 3. 使用路由 data 属性

Option 3. Use the route data property

恕我直言，最好的解决方案是在路由声明中添加一些元数据以表明此路由需要用户登录".

The best solution IMHO is to add some metadata in the routes declaration to indicate "this route requires that the user be logged in".

我们可以为此使用路由 data 属性.它可以保存任意数据，在这种情况下，我选择包含一个 requiresLogin 标志，它是 true 或 false (false> 如果未定义标志，则为默认值):

We can use the route data property for that. It can hold arbitrary data and in this case I chose to include a requiresLogin flag that's either true or false (false will be the default if the flag is not defined):

const APPROUTES: Routes = [
  {path: 'home', component: AppComponent, data:{requiresLogin: true}},
  {path: 'dashboard', component: DashBoardComponent, data:{requiresLogin: true}}
];

现在 data 属性本身没有任何作用.但是我可以用它来强制执行我的需要登录"的逻辑.为此，我再次需要一个 CanActivate 守卫.

Now the data property in itself doesn't do anything. But I can use it to enforce my "login required" logic. For that I need a CanActivate guard again.

太糟糕了，你说.现在我需要向每个受保护的路由添加两件事:元数据和守卫...

Too bad, you say. Now I need to add 2 things to each protected route: the metadata AND the guard...

但是:

• 您可以将 CanActivate 守卫附加到顶级路由，它将为其所有子路由执行 [待确认].这样你只需要使用一次守卫.当然，它只有在要保护的路由都是父路由的所有子路由时才有效(在 Rafael Moura 的示例中并非如此).
• data 属性允许我们将各种参数传递给守卫，例如特定角色的名称或检查权限、用户访问页面所需的积分或积分等.

• You can attach the CanActivate guard to a top-level route and it will be executed for all of its children routes [TO BE CONFIRMED]. That way you only need to use the guard once. Of course, it only works if the routes to protect are all children of a parent route (that's not the case in Rafael Moura's example).
• The data property allows us pass all kinds of parameters to the guard, e.g. the name of a specific role or permission to check, a number of points or credits that the user needs to possess to access the page, etc.

考虑到这些评论，最好将守卫重命名为更通用的名称，例如 AccessGuard.

Taking these remarks into account, it's best to rename the guard to something more generic like AccessGuard.

我将只展示守卫检索附加到路线的data 的代码，因为您在守卫内部做什么实际上取决于您的情况:

I'll only show the piece of code where the guard retrieves the data attached to the route, as what you do inside the guard really depends on your situation:

@Injectable()
export class AccessGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): Observable<boolean>|Promise<boolean>|boolean {
    const requiresLogin = route.data.requiresLogin || false;
    if (requiresLogin) {
      // Check that the user is logged in...
    }
  }
}

要执行上面的代码，你需要有一个类似于:

For the above code to be executed, you need to have a route similar to:

{
  path: 'home',
  component: AppComponent,
  data: { requiresLogin: true },
  canActivate: [ AccessGuard ]
}

注意.不要忘记将 AccessGuard 添加到模块的 providers 中.

NB. Don't forget to add AccessGuard to your module's providers.

这篇关于根据登录状态使用路由器重定向用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！