我們在實際開發中,會有這樣一種場景。
有些頁面是允許訪客登錄的,有些頁面是強制用戶登錄的。
後者,我們希望當用戶沒有登錄的時候,無法直接進去頁面,
而是先跳轉到登錄頁面,或者先給出讓用戶登錄的提示。
路由守衛
兩種方法選一種就好了,文件名有衝突哦。推薦第二種。
方法一:
在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_