我正在使用 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 修改,并允许用户在点击时仅从导航菜单导航到其他页面。
最佳答案
您可以简单地在菜单点击时存储一些标志。示例:
监听菜单链接上的点击事件,然后执行以下操作:
localstorage.setItem('menu-clicked', 'true');
然后在您的“AlwaysAuthGuard”中检查“菜单单击”是否在本地存储中可用。示例:
canActivate() {
// console.log('AlwaysAuthGuard');
if(localstorage.getItem('menu-clicked') == 'true'){
localstorage.removeItem('menu-clicked');
return true;
}
return false;
}
关于javascript - angular2 路由守卫验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48377730/