Angular 路由守卫
生活随笔
收集整理的這篇文章主要介紹了
Angular 路由守卫
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 路由
Angular路由: 可以控制頁面跳轉;可以在多視圖間切換;
2. 路由守衛
Angular路由守衛: 在進入或離開某路由時,用于判斷是否可以離開、進入某路由;;; return true 代表可以進入當前路由;return false 代表不可以進入當前路由,但可以進入自定義的路由;
3. 路由守衛與路由的關系
路由守衛只只能應用于路由項上;路由守衛可以應用于多個路由項;每個路由項也可以有多個路由守衛;
路由守衛通過實現如下接口來操作:
- canActivate: 控制是否允許進入路由。(通過return true/false決定)
- canActivateChild: 等同 canActivate,只不過針對是所有子路由。
- canDeactivate: 控制是否允許離開路由。
- canLoad: 控制是否允許延遲加載整個模塊。
4. 什么情況下,路由項上需要配置路由守衛屬性
當需要某些條件/某個身份才能進入的路由,這時需要在路由項上加入路由守衛屬性
5. 路由守衛的使用 (本例主要實現根據不同身份進入不同路由)
第一步: guard.service.ts - 定義路由守衛文件
- 第一種寫法: 返回Promise對象
- 第二種寫法: 返回Observable對象
第二步: app.module.ts - 注冊路由文件
@NgModule({declarations: [AppComponent],providers: [GuardService],bootstrap: [AppComponent] })第三步: app.routing.ts - 給對應的路由項配置路由守衛
// 當導航到front時,需要進入路由守衛的canActivate類進行判斷是否可以進入此路由// 什么時候需要在路由項上加路由守衛??當需要某些條件/某個身份才能進入的路由,這時需要在路由項上加入路由守衛屬性export const routes: Routes = [{path: '',component: AppComponent,children: [{path: '', redirectTo: 'front', pathMatch: 'full'},{path: 'front', component: FrontendComponent, canActivate: [GuardService]},{path: 'ordinary', component: OrdinaryComponent}]}, ]; @NgModule({imports: [RouterModule.forRoot(routes, {useHash: true})],exports: [RouterModule] }) export class RoutingModule { }轉載于:https://www.cnblogs.com/zero-zm/p/9846161.html
總結
以上是生活随笔為你收集整理的Angular 路由守卫的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Redmi K50至尊版更新:加入狂暴调
- 下一篇: 洛谷3171 网络吞吐量(网络流)