Angular Router:将旧的系统URL重定向到新URL

Question

使用Angular 12+

我们的旧系统有ASPX页面和不同的查询字符串值。我们的新系统是基于angular的，所以ASPX页面链接/查询字符串不再存在。有没有一种方法可以扩展路由器，这样当ASPX页面请求来的时候，它就会被重定向到一组翻译过的查询参数和正确的Angular路由?会有大量的排列，所以我们需要通过逻辑重写器来运行URL，而不仅仅是路由器映射。

现在，我有一个404Component，它查看URL，然后决定新的URL，并进行重定向。

客户有旧的ASPX页面书签，所以需要支持。

Answer 1

您需要一个基于CanActivateGuard的实现

创建一个Redirect服务，该服务将确定要重定向的URL并返回URL的最终目的地URL(示例实现如下)

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanDeactivate } from '@angular/router';
@Injectable()
export class RedirectGuard implements CanActivate {
constructor(public router: Router) {}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
const originalRequestUrl = state.url;
if(this.isOldUrl(originalRequestUrl)) {
this.router.navigate([this.getRedirectUrl(originalRequestUrl)]);
return false;
}
return true;
}
isOldUrl(url: string): boolean {
// pattern check on URL to determine if url needs redirect
return true;
}
getRedirectUrl(url: string): string {
// logic to return redirect-url of final destination
// returning same url for now
return url;
}
}

添加(或替换)这个到你的router map (catch all map定义)

{
path: '**',
canActivate: [ RedirectGuard ],
redirectTo: '/'
}

现在，任何不匹配的URL (**)现在应该由RedirectGuard服务类解析