angular2 路由保护验证答案

【问题标题】：angular2 route guards validationsangular2 路由保护验证
【发布时间】：2018-06-30 20:33:51
【问题描述】：

我正在使用 Angular 创建一个新应用程序，并且我想在路由守卫上设置一些验证。例如，我的网址是：localhost:4200/#/products，如果我想从菜单导航到我的应用程序的其他页面 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 });

那么如何添加一些验证来限制 url 修改并允许用户在点击时仅从导航菜单导航到其他页面。

【问题讨论】：

第一个要问的问题是为什么？你需要一个参数还是什么？
@trichetriche 我需要这个，因为有时用户应该按照流程进行操作，但如果用户修改 url 并且他在页面中填写表单，我无法保存或取消该表单以避免我会喜欢限制 url 修改。
那么，如果访问这个页面依赖于变量，你可以声明访问页面需要变量，如果它们不存在，那么你重定向到上一个页面。跨度>
@trichetriche 您可以添加一个示例并作为答案发布

标签： javascript angular typescript

【解决方案1】：

您可以简单地在菜单点击时存储一些标志。示例：

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

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

然后在您的“AlwaysAuthGuard”中检查“菜单单击”是否在本地存储中可用。示例：

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

【讨论】：