Angular路由属性的学习

canActivate属性

在Angular中，canActivate 是路由守卫（Route Guards）的一种，用于控制用户对特定路由的访问权限。路由守卫是Angular路由系统中的一个功能，它们可以在路由激活之前执行自定义逻辑，以决定是否允许路由激活。

canActivate守卫可以应用于组件路由或任何路由上。它是一个返回布尔值的函数，如果返回 true，则路由可以激活；如果返回 false，则路由激活会被阻止，用户将无法访问该路由。

canActivate 守卫的基本用法：

在这个例子中，如果用户尝试访问protected路由，AuthGuard守卫将被调用。如果用户未登录，守卫将返回false并重定向用户到登录页面。

路由守卫是Angular中一个非常强大的功能，它不仅可以用于简单的权限控制，还可以用于更复杂的场景，比如角色基础的访问控制、页面刷新时的认证状态检查等。

创建守卫：首先，你需要创建一个守卫。在Angular中，这通常是通过使用ng generate guard命令来完成的。

ng generate guard auth

实现守卫逻辑：在生成的守卫类中，你需要实现canActivate方法。这个方法应该返回一个布尔值或一个Observable，如果Observable发出true，则路由可以激活。

import { Injectable } from '@angular/core';import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';import { Observable } from 'rxjs';@Injectable({providedIn: 'root'})export class AuthGuard implements CanActivate {constructor(private router: Router) {}canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {// 检查用户是否登录if (this.isLoggedIn()) {return true;} else {// 如果用户未登录，则重定向到登录页面this.router.navigate(['/login']);return false;}}isLoggedIn(): boolean {// 这里应该是检查用户登录状态的逻辑return false;}}

应用守卫：将守卫应用于路由。在路由模块中，你可以使用canActivate属性来指定守卫。

   const routes: Routes = [{path: 'protected',component: ProtectedComponent,canActivate: [AuthGuard]}];

Resolve属性

在Angular中，resolve是路由系统中的一个特性，用于在路由激活之前获取数据。resolve可以确保在组件加载之前，所需的数据已经被加载和准备就绪，从而避免组件在没有数据的情况下渲染。

resolve通常用于以下场景：

预加载组件所需的数据。
确保路由激活之前数据已经准备好。
避免组件内部进行重复的数据获取。

resolve的基本用法：

定义 Resolver：创建一个 resolver 类，这个类实现了 Resolve 接口，并在 resolve 方法中定义获取数据的逻辑。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service'; // 假设有一个数据服务@Injectable({providedIn: 'root'
})
export class DataResolver implements Resolve<any> {constructor(private dataService: DataService) {}resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {return this.dataService.getData(); // 从服务中获取数据}
}

在路由配置中使用 Resolver：在路由模块中，你可以在路由定义中使用 resolve 属性来指定 resolver。

import { Routes } from '@angular/router';
import { DataResolver } from './data-resolver';const routes: Routes = [{path: 'data-required',component: DataRequiredComponent,resolve: {data: DataResolver // 使用 resolver 的类名}}
];

在组件中使用注入的数据：在目标组件中，你可以通过依赖注入的方式获取到 resolve 所提供的数据。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';@Component({selector: 'app-data-required',template: `...` // 组件模板
})
export class DataRequiredComponent implements OnInit {public data: any;constructor(private route: ActivatedRoute) {}ngOnInit() {this.data = this.route.snapshot.data['data']; // 获取 resolve 提供的数据}
}

注意事项

resolve可以返回一个 observable，promise或者任何同步值。
如果resolve返回的是observable，Angular 会等待它完成（即发出数据）才会继续路由激活流程。
如果resolve抛出错误，路由激活会失败，并且可以设置一个错误处理路由来处理这种情况。

其它属性：

在Angular路由系统中，除了canActivate和resolve这两个属性外，还有一些主要的路由属性如下所示：

path: 定义路由的URL路径。这是路由定义中最基本的属性。
component: 指定当路由匹配时应该创建和显示的组件。
redirectTo: 用于重定向到另一个路由。如果定义了这个属性，当路由匹配时，Angular会导航到指定的路径。
outlet: 指定路由应该渲染在哪个命名的路由出口。默认情况下，路由渲染在名为primary的出口。
children: 用于定义子路由。子路由可以进一步细化路由配置，允许嵌套路由结构。
loadChildren: 用于懒加载路由模块。这个属性允许你指定一个模块的路径，Angular会在需要时才加载这个模块。
canLoad: 类似于canActivate，但是它是用于守卫路由模块的加载。如果返回false，则模块不会被加载。
canDeactivate: 用于确定用户是否可以离开当前组件。通常用于表单数据未保存时的确认。
data: 用于传递额外的数据给路由或组件。这些数据可以通过ActivatedRoute服务访问。
runGuardsAndResolvers: 用于控制路由激活时守卫和解析器的执行。它可以设置为always（总是执行），paramsChange（仅当路由参数变化时执行），或pathParamsChange（仅当路由路径参数变化时执行）。
routeConfig: 用于定义应用的路由配置。在旧版本的Angular中使用，但在新版本中已被RouterModule.forRoot和RouterModule.forChild替代。
useAsDefault: 用于设置一个路由作为默认路由，当URL没有匹配任何路由时，Angular会自动导航到这个路由。
pathMatch: 用于控制路由匹配的行为。它可以设置为full（完全匹配）或prefix（前缀匹配）。
migrate: 用于在迁移旧的路由配置时提供向后兼容性。