Angular 路由到使用查询字符串在新服务器上重定向

Question

有人可以帮助我了解如何使用与旧参数相同的查询字符串参数将 Angular 状态重定向到新的 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' 
})

我知道一些将状态传输到控制器然后从那里处理它的技巧。但是我想知道是否有一种方法可以通过路由器重定向它，以避免在不同的控制器中重复代码？

Answer 1

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

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

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

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

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

Answer 2

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 路由到使用查询字符串在新服务器上重定向

Angular routing to redirect on new server with query string

angularjs

angularjs-directive

angularjs-scope

angularjs-routing

angular-ui-router