Question

我有一个使用基本路由模块的Angular应用程序。下面显示了我定义的路线：

...
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent }
];
...

现在我想保护我的仪表板路线。我只想在我有一个名为localStorage的{{1}}对象时进行路由。我该怎么办？

token

类似的东西：

var local = JSON.parse(localStorage.getItem('token'));

Answer 1

您可以使用实现CanActivate接口的路由保护来实现： https://angular.io/api/router/CanActivate

canActivate方法可以返回一个布尔值，如果它应该被同步检查，或者如果它是异步的则是promise / observable。无论如何，在您的情况下，您只是检查localStorage，因此您只需根据令牌返回true或false。

Answer 2

你应该使用Angular Route Guards。像这样：

import { CanActivate } from '@angular/router'; 

class DashBoardGuard implements CanActivate {
  canActivate() {
    if (// your condition)  {
      return true; // all fine
    } else {//maybe redirect somwhere}
  }
  
}

// in your routes
...
{path: 'dashboard', canActivate: {[DashBoardGuard]}

详细了解警卫here

Angular - 仅在条件下路由（基于localStorage）

2 个答案: