使用查询字符串在新服务器上重定向的角度路由

Posted 2021-05-04

有人可以帮我理解如何将Angular状态重定向到新URL，查询字符串参数与旧URL相同吗？

例

如果我的Angular应用程序在http://example.com上，那么所有对http://example.com/dashboard?id=123&view=test的请求都应该重定向到http://test.com/dashboard?id=123&view=test。

我应该如何使用以下代码定义我的状态？

.state('dashboard', { 
    url: 'domain.com/dashboard', 
    controller: 'DashboardCtrl' 
})

我知道将状态转移到控制器然后从那里处理它的技巧很少。但我想知道是否有办法通过路由器重定向它只是为了避免不同控制器中的重复代码？

答案

A. Angular 1

1. main.route.js：

.state('stateName', {
  url: 'dashboard',
  controller: ['$location', '$window', function ($location, $window) {
    var url = 'domainB.com';
    url += $location.$$url;
    $window.location.href = url;
  }]
})

B. Angular2 / 4

1. app.module.ts：声明一个自定义提供程序，如：

@NgModule({
  providers: [
    {
      provide: 'externalUrlResolver',
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
        window.location.href = `${route.data.externalUrl}${state.url}`;
      }
    }
  ]
})

2. app-routing.module.ts：现在使用自定义提供程序，我们可以在外部重定向。

const APP_ROUTES: Routes = [
  { path: 'dashboard', component: AnyComponent,
    pathMatch: 'prefix',
    resolve: { url: 'externalUrlResolver' },
    data: { externalUrl: 'domainB.com'}
  }
]

输入

http://domainA.com/dashboard?view=list&id=123&visible=yes

这将被重定向到：

http://domainB.com/dashboard?view=list&id=123&visible=yes

另一答案

我认为最好的解决方案不是在Angular中 - 在代码加载后在浏览器中运行 - 而是在服务器上。如果您正在使用Apache，请添加一个.htaccess规则，该规则将所有example.com请求重定向到test.com。

创建一个名为.htaccess的文件并将其放在应用程序根目录中：

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^example.com$ [NC]
RewriteRule ^(.*)$ http://test.com/$1 [R=302,L]

如果您希望重定向是永久性的（意味着浏览器和搜索引擎会记住并且不会打扰去旧域），请将302更改为301

如果这不是解决方案，您可以使用CanActivateChild guard来指示在路由加载之前应该运行的代码。将其添加到基本路由的路由配置中，此代码将始终在组件等...初始化之前运行。在其中，您可以阅读当前路线并使用标准javascript将用户重定向到新域。