Javascript angular2路线警卫验证
我正在使用angular创建一个新应用程序,我想在route guards上设置一些验证。例如,我的url是:Javascript angular2路线警卫验证,javascript,angular,typescript,Javascript,Angular,Typescript,我正在使用angular创建一个新应用程序,我想在route guards上设置一些验证。例如,我的url是:localhost:4200/#/products,如果我想从菜单导航到我的应用程序的另一个页面localhost:4200/#/invoice,我不希望导航成为可能,只需手动修改url并键入invoice,而不是products,但只能在菜单上单击 这就是我的守卫: import { Injectable } from '@angular/core' ; import { Activa
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修改,并允许用户在单击时仅从导航菜单导航到其他页面。您只需在菜单单击时存储一些标志即可。例如:
canActivate() {
// console.log('AlwaysAuthGuard');
if(localstorage.getItem('menu-clicked') == 'true'){
localstorage.removeItem('menu-clicked');
return true;
}
return false;
}
收听菜单链接上的单击事件,然后执行以下操作:
localstorage.setItem('menu-clicked', 'true');
然后在“AlwaysAuthGuard”中检查“单击菜单”是否在本地存储中可用。例如:
canActivate() {
// console.log('AlwaysAuthGuard');
if(localstorage.getItem('menu-clicked') == 'true'){
localstorage.removeItem('menu-clicked');
return true;
}
return false;
}
第一个问题是为什么?你需要一个参数还是什么?@trichetriche我需要这个,因为有时候用户应该按流操作,但如果用户修改url并在页面中填写表单,我无法保存或取消该表单,以避免限制url修改。那么,如果访问此页面取决于变量,您可以声明有访问该页所需的变量,如果这些变量不存在,则重定向到上一页。@trichetriche您可以添加一个示例并作为答案发布