Angular最新教程-第十節 路由三（路由器鉤子函數、路由守衛）

我們在實際開發中，會有這樣一種場景。
有些頁面是允許訪客登錄的，有些頁面是強制用戶登錄的。
後者，我們希望當用戶沒有登錄的時候，無法直接進去頁面，
而是先跳轉到登錄頁面，或者先給出讓用戶登錄的提示。

路由守衛

兩種方法選一種就好了，文件名有衝突哦。推薦第二種。
方法一：
在src/app目錄下新建guards文件夾
在src/app/guards目錄下新建login.guard.ts文件
在src/app/guards/login.guard.ts文件中，
鍵入a-guard-can-activate回車。

Angular TypeScript Snippets插件自動幫我們編寫文件。

沒有安裝插件的可以查閱：Angular最新教程-第一節環境搭建和新建項目http://blog.csdn.net/onil_chen/article/details/77934685
修改class爲LoginGuard。
方法二：使用generate
ng generate guard guards/login

然後將LoginGuard加到src\app\app.module.ts的路由配置中。

路由器鉤子函數

在src\app\app.module.ts頭部導入
import { LoginGuard } from './guards/login.guard';
這裏要是用路由器的鉤子函數canActivate
{path:'update',component:LatestComponent,canActivate:[LoginGuard]},
保存運行，報錯了。提示LoginGuard中沒有provider。

在src\app\app.module.ts中的@NgModule的providers里加入LoginGuard。

providers: [
    LoginGuard,
    {provide:LocationStrategy,useClass:HashLocationStrategy},
    {provide:APP_BASE_HREF,useValue:'/'}
  ],

將src\app\guards\login.guard.ts中的第10行返回true修改爲false。
http://localhost:4200/#/update還是可以訪問。
查閱官方文檔說明。

canActivate裏面的參數是route，新建文件的參數是next。
將next修改成route就可以正常使用了（囧）。

源代碼：百度雲 實際代碼變化較少，不更新壓縮文件。
碼雲：https://gitee.com/xiaohuOni/oniplan-ng
有碼雲的幫忙給個star，感謝。

這節課的內容就到這裏完成了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公衆號ionic_