angular 路由守卫

楼上坐 發表於 2019-9-10 10:59:00

<h3>一. canActive 使用场景：导航栏某个标签，如用户设置页面，只有登录才可以查看，不登录则点击无效</h3>
说明： canActive--是否能调用当前路由
实现：
　　1. 创建路由守卫类 
　　
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>import { CanActivate } from '@angular/router'</div>
<div>export class LoginGuard implements CanActivate{</div>
<div>    loginState: boolean = false</div>
<div>    canActivate() {</div>
<div>        if(this.loginState) {</div>
<div>            return true</div>
<div>        }else {</div>
<div>            return false</div>
<div>        }</div>
<div>    }</div>
<div>    login() {</div>
<div>        this.loginState = true</div>
<div>    }</div>
<div>    loginOut() {</div>
<div>        this.loginState = false</div>
<div>    }</div>
<div>}</div>
</div>
　　2. 在 app-routing.module.ts 或者在 app.modules.ts 中注入
　　　　<code class="language-css">@NgModule({   　　　　　　imports: ,   　　　　　　exports: ,   　　　　　　providers: 　　　　 }) 　　</code>
　　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: , canDeactivate: },   　　　　{ 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 中注入
　　　
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>/ 路由守卫</div>
<div>import { LoginGuard } from './loginGuard/login.guard'</div>
<div>import { UnsaveGuard } from './loginGuard/unsave.guard'</div>
<div>@NgModule({</div>
<div>  providers: [LoginGuard, UnsaveGuard],</div>
<div>  bootstrap: [AppComponent]</div>
<div>})</div>
</div>
　　3. 在 app-routing.module.ts 中配置
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div> { path: 'usersetting', component: UserSettingsComponent, canActivate: [LoginGuard], canDeactivate: [UnsaveGuard]},</div>
</div>
 
　　4. 使用，在设置页面保存按钮，点击后直接离开，不点击离开时提示用户
　　
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>import { UnsaveGuard } from '../loginGuard/unsave.guard'</div>
<div> </div>
<div>export class UserSettingsComponent implements OnInit {</div>
<div>  saveState: boolean = false</div>
<div>  constructor(private unsaveGuard: UnsaveGuard) { }</div>
<div>  save() {</div>
<div>    this.saveState = true</div>
<div>    this.unsaveGuard.changeSaveState()</div>
<div>  }</div>
<div>}</div>
</div>
 
三 . resolve -- 守卫
（未完待续）
 
代码路径访问： https://github.com/kefaze/ang
  
来源：https://www.cnblogs.com/monkey-K/p/11496235.html

頁: [1]

琼殿技术论坛's Archiver

angular 路由守卫