angular之CanActivate守卫

效果图
1、没有加守卫的页面可以直接进入

2、加了守卫的页面需要验证

我这里使用的是弹框，实例开发时，可以改为跳到登陆页

具体实现：

1、准备步骤

新建angular项目

ng new angularDeom --skip-install
cd angularDemo
cnpm i

2、创建路由守卫

2.1、创建

ng g guard guards/login

选择第一个

路由守卫文件需要填充的内容截图：


import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { CookieService } from 'ngx-cookie-service';@Injectable({providedIn: 'root'
})
export class LoginGuard implements CanActivate {public token: any;constructor(private cookieService: CookieService, private router: Router) { }// route: ActivatedRouteSnapshot,  如果有错的话，试着改下这个地方canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {// 在这里判定是否跳转目标路由// 如果可以跳转页面，返回true,不能，则返回false// 建议逻辑// 1.是否登录// 2.访问是否要求权限// 3.查询当前登录用户是否拥有目标权限// 如果不符合条件，则根据selectBestRoute()方法返回其他页面this.token = this.cookieService.get('Abp.AuthToken');if (this.token === ''){console.log('用户未登录，跳转到登陆页面');this.router.navigate(['login']);return false;} else {return true;}}
}

2.2、配置

在src\app\app.module.ts头部导入

import { LoginGuard } from './guards/login.guard';providers: [LoginGuard,CookieService,{ provide: LocationStrategy, useClass: HashLocationStrategy },{ provide: NZ_I18N, useValue: zh_CN }],

我的完整app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { CookieService } from 'ngx-cookie-service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { LoginGuard } from './guards/login.guard';
import { Main1Component } from './main1/main1.component';
import { Main2Component } from './main2/main2.component';
import { AddComponent } from './add/add.component';
import { NavComponent } from './nav/nav.component';@NgModule({declarations: [AppComponent,LoginComponent,MainComponent,Main1Component,Main2Component,AddComponent,NavComponent,],imports: [BrowserModule,AppRoutingModule,NgZorroAntdModule,FormsModule,ReactiveFormsModule,HttpClientModule,BrowserAnimationsModule,],providers: [LoginGuard,CookieService,{ provide: LocationStrategy, useClass: HashLocationStrategy },{ provide: NZ_I18N, useValue: zh_CN }],bootstrap: [AppComponent]
})
export class AppModule { }

3、模拟创建项目所需页面

可以随意创建，这里只是模拟下

ng g  component login
ng g  component nav
ng g  component add
ng g  component main
ng g  component main1
ng g  component main2

3.1、login页面

登陆页面，点击时验证用户名和密码，并存储cookie（我没存储，为了验证后面的路由守卫）

constructor(private fb: FormBuilder,private router: Router,private http: HttpClient,private cookieService: CookieService,private titleService: Title) {}this.router.navigate(['nav']);

3.2、nav页面

登陆后跳转到nav页面，导航栏

<div class="box"><ul><li><a [routerLink]="['main']">主页</a></li><li><a [routerLink]="['main1']">主页1</a></li><li><a [routerLink]="['main2']">主页2</a></li><li><a [routerLink]="['add']">添加</a></li></ul>
</div>
<div class="main"><router-outlet></router-outlet>
</div>

* {padding: 0;margin: 0;
}
.box {width: 100%;height: 70px;line-height: 70px;ul {margin-left: -40px;list-style: none;height: 70px;background-color: blue;}li {float: left;}a {padding: 26px 100px;color: #fff;}a:hover {background-color: pink;}
}
.main{padding: 10px 30px;
}

其他页面基本没动

4、路由配置（重点）

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { LoginGuard } from './guards/login.guard';
import { Main1Component } from './main1/main1.component';
import { Main2Component } from './main2/main2.component';
import { AddComponent } from './add/add.component';
import { NavComponent } from './nav/nav.component';// 哪个地方需要配置路由守卫，就在哪个路由后面加
const routes: Routes = [{ path: '', redirectTo: 'login', pathMatch: 'full' },{ path: 'login', component: LoginComponent },{ path: 'nav', component: NavComponent, children: [{ path: '', redirectTo: 'main', pathMatch: 'full' },{ path: 'main', component: MainComponent},{ path: 'main1', component: Main1Component, canActivate: [LoginGuard] },{ path: 'main2', component: Main2Component},{ path: 'add', component: AddComponent, canActivate: [LoginGuard]  },]},// 通配符路由。当输入的路径与上面的都没有匹配的，就进入这个页面//  { path: '**', component: PageNotFoundComponent }
];
@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

或者
正常的路由应该这样写，上面的是为了看着方便

const routes: Routes = [{ path: '', redirectTo: 'login', pathMatch: 'full' },{ path: 'login', component: LoginComponent },{ path: 'nav', component: NavComponent, children: [{ path: '', redirectTo: 'main', pathMatch: 'full' },{ path: 'main', component: MainComponent},{ path: 'main1', component: Main1Component, canActivate: [LoginGuard] },{ path: 'main2', component: Main2Component},{ path: 'add', component: AddComponent,   },], canActivate: [LoginGuard]},
];

angular之CanActivate守卫相关推荐

【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载.这里是指对应组件的代码). ↓ ② CanAcitivat ...
Angular路由--模块预加载
2019独角兽企业重金招聘Python工程师标准>>> 预加载是介于直接加载.惰加载的一种方式. 预加载的工作原理在每次成功的导航后,路由器会在自己的配置中查找尚未加载并且可以预加 ...
Angular 2.x 从0到1 (五）史上最简单的Angular2教程
第一节:Angular 2.0 从0到1 (一) 第二节:Angular 2.0 从0到1 (二) 第三节:Angular 2.0 从0到1 (三) 第四节:Angular 2.0 从0到1 (四) ...
angular7中路由守卫
路由守卫的作用,在做登录等权限验证的时候,需要用到路由守卫,辅助进行验证. 比如:使用angular做的是单页应用,如果不用任何权限控制的话,就算使用了用户登录功能,假如我们需求是当用户登录成功之后才 ...
angular2.0+之路由守卫
本文转载至:https://segmentfault.com/a/1190000010851032 引言在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用 ...
angular2系统学习 - 路由与导航(4)
angular2系统学习 - 路由与导航(4) 1.路由守卫路由守卫其实就是一种拦截机制,在进入离开视图等时的拦截行为. 路由守卫可以看作是挂在路由上连接视图组件的拦截器,在进入.离开视图等事件监听 ...
java如何写ajax,java,jq,ajax写分页
1.先写好html基础样式我懒得去写css样式233,能看就行 #page { width: 20px; } id name pwd age 上一页下一页 2.编写servlet 2.1 先写查询 ...
2022年5月9日-10日复盘计划
这几天没更新博客,可能是因为要出项了,所以吃睡不着.曾经试图让自己做到即使外界如何惊涛拍岸的情况下内心保持风平浪静,却不料当前自己是那么的烦躁! 每日醒言这个社会就是这样的现实,如果你是老板,那么你 ...
Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...