angular 路由守卫 CanActivate和CanDeactivate

1. CanActivate 路由进入

    新建守卫focusGuard.ts文件

import { CanActivate } from '@angular/router';
export class LoginGuard implements CanActivate {canActivate () {let loggedIn: boolean = Math.random() < 0.5;console.log(loggedIn)return loggedIn  // retunrn出true或false true允许进入路由 false不允许进入路由}
}

    配置route.ts文件

import { RouterguardComponent } from './routerguard/routerguard.component';
import { LeaveGuard  } from './routerguard/unfocusGuard'; // 这里！！！！！！const routes: Routes = [...{path:'routerguard',component:RouterguardComponent,canActivate:[LoginGuard], // 这里！！！！！！！！},
]@NgModule({imports: [ RouterModule.forRoot(routes)],exports: [RouterModule],providers: [LoginGuard] // 这里！！！！！！！
})

    这时当要进入routerguard路由时 会先判断守卫focusGuard.ts中return出去的值 true允许进入路由 false不允许进入路由

2. CanDeactivate 路由离开

    新建守卫unfocusGuard.ts文件

import { CanDeactivate } from '@angular/router';
import { RouterguardComponent } from './routerguard.component';export class LeaveGuard implements CanDeactivate {canDeactivate (component: RouterguardComponent) {let loggedIn: boolean = Math.random() < 0.5;console.log(component) // componrnt为 routerguard.component的内容 可获得其变量// return window.confirm("确定要离开吗");return loggedIn}
}

import { RouterguardComponent } from './routerguard/routerguard.component';
import { LeaveGuard  } from './routerguard/unfocusGuard'; // 这里！！！！！！！！！const routes: Routes = [...{path:'routerguard',component:RouterguardComponent,canDeactivate:[LeaveGuard]   // 这里！！！！！！！！！},
]@NgModule({imports: [ RouterModule.forRoot(routes)],exports: [RouterModule],providers: [LeaveGuard]  // 这里！！！！！！！！！！
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！