angular2路线保护验证

时间:2018-01-22 08:53:47

标签: javascript angular typescript

我正在使用angular创建一个新的应用程序,我想在路线防护上设置一些验证。例如,我的网址为:localhost:4200/#/products,如果我想从菜单导航到我的应用localhost:4200/#/invoice的其他网页,我不希望导航只需手动修改网址并输入{ {1}}代替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;
        }
      }

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

1 个答案:

答案 0 :(得分:1)

您只需在菜单点击上存储一些标记即可。例如:

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

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

然后在“AlwaysAuthGuard”中检查“localstorage”中是否有“菜单点击”可用。例如:

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