大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下angular9中路由守卫的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
目前成都创新互联已为成百上千的企业提供了网站建设、域名、网站空间、网站改版维护、企业网站设计、麦盖提网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
路由守卫是什么
任何用户都能在任何时候导航到任何地方。但有时候出于种种原因需要控制对该应用的不同部分的访问。可能包括如下场景:
该用户可能无权导航到目标组件。
可能用户得先登录(认证)。
在显示目标组件前,你可能得先获取某些数据。
在离开组件前,你可能要先保存修改。
你可能要询问用户:你是否要放弃本次更改,而不用保存它们?
相关推荐:《angular教程》
组件的创建
1、home组件创建
2、login组件创建
3、home下的first和second子组件
守卫路由相关核心代码
routing中每个路由都是对所有人开放的。这些新的管理特性应该只能被已登录用户访问。
编写一个 CanActivate() 守卫,将正在尝试访问管理组件匿名用户重定向到登录页。
1.1 在auth 文件夹下,新建一个auth.service.ts文件,模拟有关登录的请求服务,实际场景一般是将后台token保存在cookie中.
import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { tap, delay } from 'rxjs/operators'; @Injectable({ providedIn: 'root', }) export class AuthService { isLoggedIn = false; //默认未登录 // 记录登录之后,需要跳转到原来请求的地址 redirectUrl: string; // 登录 login(): Observable{ return of(true).pipe( delay(1000), tap(val => this.isLoggedIn = true) ); } // 登出 logout(): void { this.isLoggedIn = false; } }
1.2 在 auth 文件夹下,新建一个auth.guard.ts文件
import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable({ providedIn: 'root', }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { let url: string = state.url return this.checkLogin(url); } checkLogin(url: string): boolean { if (this.authService.isLoggedIn) { return true; } // 保存原始的请求地址,登录后跳转到该地址 this.authService.redirectUrl = url; // 未登录,跳转到登录页面 this.router.navigate(['/login']); return false; } }
在路由中使用守卫
在app-routing.module.ts文件下使用
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AuthGuard } from './auth/auth.guard'; import { LoginComponent } from './login/login.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'home', loadChildren: () => import('./home/home.module') .then(mod => mod.HomeModule), canActivate: [AuthGuard], // 守卫路由 } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}
以上是“angular9中路由守卫的使用方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!