angular2路线保护验证

Question

我正在使用angular创建一个新应用程序，我想在路线防护上设置一些验证。 例如我的网址是： localhost:4200/#/products如果我想从菜单导航到我的应用程序localhost:4200/#/invoice其他页面localhost:4200/#/invoice我不希望导航只需手动修改网址和输入invoice而不是products但只在菜单点击。

所以这是我的警惕：

import { Injectable } from '@angular/core' ;
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router';

@Injectable()
export class AlwaysAuthGuard implements CanActivate {
        canActivate() {
          console.log('AlwaysAuthGuard');
          return true;
        }
      }

这是路由服务：

const appRoutes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: AppLoginComponent, data: { title: 'Login' }},
  { path: 'invoice', component: InvoiceComponent, canActivate: [AlwaysAuthGuard], data: { title: 'Invoice' }},
  { path: 'products', component: ProductsComponent, data: { title: 'Products' }},
  { path: 'logout', component: LogoutComponent, data: { title: 'Logout' }},
  { path: '**', component: NotFoundComponent, data: { title: 'Page Not Found' }}
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash : true });

那么如何添加一些我限制网址修改的验证，并允许用户在按下点击时仅从导航菜单导航到其他页面。

Answer 1

您只需在菜单点击上存储一些标志即可。 例：

在菜单链接上收听点击事件，然后执行以下操作：

localstorage.setItem('menu-clicked', 'true');

然后在你的'AlwaysAuthGuard'检查是否在localstorage中提供'menu-clicked'。 例：

canActivate() {
   // console.log('AlwaysAuthGuard');
   if(localstorage.getItem('menu-clicked') == 'true'){
      localstorage.removeItem('menu-clicked');
      return true;
   }
   return false;
}