文章/答案/技术大牛

发布

问angular2路由保护验证
EN

Stack Overflow用户

提问于 2018-01-22 16:53:47

回答 1查看 123关注 0票数 3

我正在使用angular创建一个新的应用程序，我想在路由守卫上设置一些验证。例如，我的url是：localhost:4200/#/products，如果我想要从菜单导航到我的应用程序localhost:4200/#/invoice的其他页面，我不希望这成为可能，导航只是手动修改url并输入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修改，并允许用户在按下单击时仅从导航菜单导航到其他页面。

javascript

angular

typescript

回答 1

Stack Overflow用户

发布于 2018-01-22 17:10:52

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

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

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

然后在你的'AlwaysAuthGuard‘中检查’菜单点击‘是否在本地存储中可用。示例：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48377730

复制

相似问题

问angular2路由保护验证
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular2路由保护验证EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular2路由保护验证
EN