angular4.0 路由守卫详解
在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。
当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在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,工作量还挺大的,大家慢慢研究吧