路由守卫

Posted 2020-10-30 Faded露露

 

1.Resolve守卫

Resolve守卫主要是在路由激活之前获取路由数据，预先加载数据，且数据加载完成后路由才返回true，以保证导航至该路由时不用现去服务取数据。

1.1配置Resolve守卫

创建守卫文件resolve.service.ts

import { Router, Resolve, ActivatedRouteSnapshot } from \'@angular/router\';

    @Injectable()

    export class ResolveService implements Resolve{
        constructor(private dataService:Dataservice,private router: Router){ }
        resolve(private route: ActivatedRouterSnapshot ): Promise<Data>|boolean{
                return this.dataService.getData().then(result => {
                    if(result) return result;
                    else {
                        this.router.navigate([\'../\'],{relativeTo:this.route});
                        return false;
                    }
                })
        }
    } 

将守卫添加至routing

  path:\'\',
    component:Comp,
    resolve:{
        dataA:ResolveService
    }

配置Resolve守卫后，加载路由前就已经获取了数据，所以在组件内部不需要再去调用服务来获取数据，可以直接从route的data属性获取数据。

ngOnInit() {
  this.route.data
    .subscribe((data: { dataA }) => {
      this.data = data.dataA;
    });
}

注意这里data中的dataA属性是在路由中接受守卫数据dataA

2.各守卫用法。

2.1CanActivate 进入路由守卫

上面的例子我们已经使用了CanActivate路由，它会在导航至该视图之前发生。这个守卫在这里也就不讲了。

2.2CanActivateChild 进入子路由守卫

与进入路由守卫用法类似，只不过挂在路由数组父节点上，进入这个节点的子节点路由视图之前触发。

2.3 CanDeactivate 离开路由守卫

与进入路由守卫用法类似，不过是在离开视图时触发。

2.4 Resolve 激活路由守卫

在路由激活前触发，一般用来获取激活路由对应视图组件数据使用。进入视图前，利用该守卫将视图所需数据加载完成，可以避免进入视图无法出现数据的情况。利用路由获取的数据可以在route对象中获取。

激活路由守卫配置

import { Injectable }             from \'@angular/core\';
import { Router, Resolve,
        ActivatedRouteSnapshot } from \'@angular/router\';
@Injectable()
export class GuardService implements Resolve<ModelClass>{
    resolve(route:ActivatedRouteSnapshot): Promise<ModelClass>|boolean{
        //获取数据，并返回。数据挂在路由上，并非挂在视图组件上。
        //获取不到，返回false。
    }
}

路由配置

{
    path:\'\',
    component:ParACom,
    resolve:{
        resultData: GuardService
    }
}

这里有两个重点
1.继承类后挂着类型
2.返回的数据以对象的形式挂在路由守卫配置上，属性名自定义，属性值为守卫类。

通过路由获取数据 
由于我们已经挂了Resolve守卫，在组件中想要获取数据时，不需要再重新通过服务获取，而可以直接从Resolve守卫中拿到数据。

{
    path:\'\',
    component:ParACom,
    resolve:{
        resultData: GuardService
    }
}