随笔- 77 文章- 1 评论- 0 阅读- 71874

angular 路由守卫

一. canActive 使用场景：导航栏某个标签，如用户设置页面，只有登录才可以查看，不登录则点击无效

说明： canActive--是否能调用当前路由

实现：

　　1. 创建路由守卫类

import { CanActivate } from '@angular/router'
export class LoginGuard implements CanActivate{
    loginState: boolean = false
    canActivate() {
        if(this.loginState) {
            return true
        }else {
            return false
        }
    }
    login() {
        this.loginState = true
    }
    loginOut() {
        this.loginState = false
    }
}

　　2. 在 app-routing.module.ts 或者在 app.modules.ts 中注入

　　　　@NgModule({ 　　　　　　imports: [RouterModule.forRoot(routes)], 　　　　　　exports: [RouterModule], 　　　　　　providers: [LoginGuard, UnsaveGuard] 　　　　 }) 　　

　　3. 在 app-routing.module.ts 中配置

　　　　import { LoginGuard } from './loginGuard/login.guard'
　　　　import { UnsaveGuard } from './loginGuard/unsave.guard'
　　　　const routes: Routes = [
　　　　{ path: '', redirectTo: 'home', pathMatch: 'full' },
　　　　{ path: 'app', component: AppComponent },
　　　　{ path: 'directive', component: TemplateDirective },
　　　　{ path: 'book', component: TemplateBookComponent, children: bookChildrenRoutes},
　　　　{ path: 'details/:id', component: bookDetailsComponent },
　　　　{ path: 'usersetting', component: UserSettingsComponent, canActivate: [LoginGuard], canDeactivate: [UnsaveGuard]},
　　　　{ path: 'home', component: HomeComponent},
　　　　];

　　4. 使用，在 home 页面有登录和退出的按钮，点击改变登录状态，查看路由的可访问性

　　import { LoginGuard } from '../loginGuard/login.guard'

　　export class HomeComponent implements OnInit {

　　　　constructor( private loginGuard: LoginGuard ) { }

　　　 loginIn() { alert("登录") this.loginGuard.login() }

　　　　loginOut() { alert("退出") this.loginGuard.loginOut() }

　　　　 ngOnInit() { }

　　}

二. CanDetivate 使用场景：用户设置页面，如果没点击保存，提示用户，点击了保存直接离开

说明： CanDetivate--是否可以离开路由

实现：

　　1. 创建 canDetivate 类

　　import { CanDeactivate } from '@angular/router'
　　import { UserSettingsComponent } from '../user-settings/user-settings.component'
　　// UserSettingsComponent--要守卫的组件类
　　export class UnsaveGuard implements CanDeactivate<UserSettingsComponent> {
    　　saveState: boolean = false
    　　/* return true 直接离开 return false 不能离开该路由 */
    　　canDeactivate(component: UserSettingsComponent) {
        　　if(this.saveState) {
            　　return true
        　　}else {
            　　return window.confirm("您还没保存，确认离开吗？")
        　　}
    　　}
    　　changeSaveState() {
        　　this.saveState = true
    　　}
　　}

　　2. 在 app-routing.module.ts 或者在 app.modules.ts 中注入

/ 路由守卫
import { LoginGuard } from './loginGuard/login.guard'
import { UnsaveGuard } from './loginGuard/unsave.guard'
@NgModule({
  providers: [LoginGuard, UnsaveGuard],
  bootstrap: [AppComponent]
})

　　3. 在 app-routing.module.ts 中配置

 { path: 'usersetting', component: UserSettingsComponent, canActivate: [LoginGuard], canDeactivate: [UnsaveGuard]},

　　4. 使用，在设置页面保存按钮，点击后直接离开，不点击离开时提示用户

import { UnsaveGuard } from '../loginGuard/unsave.guard'
 
export class UserSettingsComponent implements OnInit {
  saveState: boolean = false
  constructor(private unsaveGuard: UnsaveGuard) { }
  save() {
    this.saveState = true
    this.unsaveGuard.changeSaveState()
  }
}