angular6 中路由守衛 CanActivate和CanDeactivate

1. CanActivate 路由進入
新建守衛 auth-guard.service.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 路由離開
新建守衛 auth-guard.service.ts 文件

import { CanDeactivate } from '@angular/router';
import { RouterguardComponent } from './routerguard.component';
 
export class LeaveGuard implements CanDeactivate<RouterguardComponent> {
 
    canDeactivate (component: RouterguardComponent) {
 
    	let loggedIn: boolean = Math.random() < 0.5;
    	console.log(component) // componrnt爲 routerguard.component的內容 可獲得其變量
        // return window.confirm("確定要離開嗎");
        return loggedIn
    }
}

配置route.ts文件

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]  // 這裏！！！！！！！！！！
})

這時當要從routerguard路由離開時 會先判斷守衛unfocusGuard.ts中return出去的值 true允許離開路由 false不允許離開路由

實例 ：