在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。
当希望用户离开一个正常编辑页时，要中断并提醒用户是否真的要离开时，如果在Angular中应该怎么做呢？
其实Angular路由守卫属性可以帮我们做更多有意义的事，而且非常简单。
Angular 的 Route 路由参数中除了熟悉的 path、component 外，还包括四种是否允许路由激活与离开的属性。
- canActivate： 控制是否允许进入路由。
- canActivateChild： 等同 canActivate，只不过针对是所有子路由。
- canDeactivate： 控制是否允许离开路由。
- canLoad： 控制是否允许延迟加载整个模块。
这里我们只讲canActivate的用法
注册RouteguardService服务
代码如下，这个是完整的守卫逻辑；每一步都写好了注释，我就不细说了，看注释就明白了；
import { Injectable } from ‘@angular/core‘;
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from ‘@angular/router‘;
import { Router } from "@angular/router";
import userModel from ‘../model/user.model‘;
@Injectable()
export class RouteguardService implements CanActivate{
constructor(
private router: Router
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean{
// 返回值 true: 跳转到当前路由 false: 不跳转到当前路由
// 当前路由名称
var path = route.routeConfig.path;
// nextRoute: 设置需要路由守卫的路由集合
const nextRoute = [‘home‘, ‘good-list‘, ‘good-detail‘, ‘cart‘, ‘profile‘];
let isLogin = userModel.isLogin; // 是否登录
// 当前路由是nextRoute指定页时
if (nextRoute.indexOf(path) >= 0) {
if (!isLogin) {
// 未登录，跳转到login
this.router.navigate([‘login‘]);
return false;
}else{
// 已登录，跳转到当前路由
return true;
}
}
// 当前路由是login时
if (path === ‘login‘) {
if (!isLogin) {
// 未登录，跳转到当前路由
return true;
}else{
// 已登录，跳转到home
this.router.navigate([‘home‘]);
return false;
}
}
}
}
上面的代码中，有这句代码：import userModel from ‘../model/user.model‘;
user.model用来记录用户的状态值以及其他属性，代码如下
let userModel = { isLogin: false, // 判断是否登录 accout: ‘‘, password: ‘‘, }; export default userModel;
在app-routing.module.ts中配置路由守卫
首先注入RouteguardService服务，然后在需要守卫的路由配置中加入：canActivate: [RouteguardService]
这样在写有canActivate的路由中，都会调用RouteguardService服务，代码如下：
import {NgModule} from ‘@angular/core‘;
import { Routes, RouterModule } from ‘@angular/router‘;
import {HomeComponent} from "./page/home/home.component";
import {GoodDetailComponent} from "./page/good-detail/good-detail.component";
import {CartComponent} from "./page/cart/cart.component";
import {ProfileComponent} from "./page/profile/profile.component";
import {GoodListComponent} from "./page/good-list/good-list.component";
import { RouteguardService } from ‘./service/routeguard.service‘;
import { LoginComponent } from ‘./page/login/login.component‘;
const routes: Routes = [
{
path: ‘‘, // 初始路由重定向[写在第一个]
redirectTo: ‘home‘,
pathMatch: ‘full‘ // 必须要设置
},
{
path: ‘login‘,
component: LoginComponent,
canActivate: [RouteguardService]
},
{
path: ‘home‘,
component: HomeComponent,
canActivate: [RouteguardService]
},
{
path: ‘good-detail‘,
component: GoodDetailComponent,
canActivate: [RouteguardService]
},
{
path: ‘good-list‘,
component: GoodListComponent,
canActivate: [RouteguardService]
},
{
path: ‘cart‘,
component: CartComponent,
canActivate: [RouteguardService]
},
{
path: ‘profile‘,
component: ProfileComponent,
canActivate: [RouteguardService]
},
{
path: ‘**‘, // 错误路由重定向[写在最后一个]
redirectTo: ‘home‘,
pathMatch: ‘full‘ // 必须要设置
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
ok，工作量还挺大的，大家慢慢研究吧
