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()

  }

}

 

三 . resolve -- 守卫

（未完待续）

 

代码路径访问： https://github.com/kefaze/ang