Question

在我们的应用中，我们有多个路线定义。而且我认为我们搞砸了什么。 我们无法手动编写URL并获取要加载的正确组件。我们每次都被重定向到/ login，然后在用户登录时重定向回/ account 。

您是否看到我们的路线有一些可能的改进？我猜它不是很有效率而且制作精良＃34;我们通过自己的路由路径将我们的大脑烧毁，外部观点将受到赞赏。

Secret是我们的核心应用程序，我们只需向用户显示一个秘密请求表单。

例如，尝试访问/ account / secret / terms会重定向我们以登录然后返回帐户，因为用户当前已登录...

以下是我们的路线：

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { AccountComponent } from './account/account.component';

import { accountRoutes } from './account/account.routes';
import { CanActivateViaAuthGuard } from './login/services/auth-guard.service';

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'account',
    component: AccountComponent,
    canActivate: [CanActivateViaAuthGuard],
    children: accountRoutes
  },

  // otherwise redirect to home
  { path: '**', redirectTo: '/' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

第一方提问：on＆＃39;＆＃39; route，我们应该重定向到login而不是直接调用LoginComponent吗？

./帐户/帐户routes.ts

import { Routes } from '@angular/router';

import { DashboardComponent } from './dashboard.component';
import { SecretComponent } from './secret/secret.component';

import { secretRoutes } from './secret/secret.routes';

export const accountRoutes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'secret', component: SecretComponent, children: secretRoutes },

  // otherwise call DashboardComponent
  { path: '**', component: DashboardComponent }
];

最后，

帐户/秘密/ secret.routes.ts：

import { Routes } from '@angular/router';
import { SecretFormComponent } from './secret-form.component';
import { SecretTermsComponent } from './secret-terms.component';
import { TermsGuard } from './services/terms-guard.service';

export const secretRoutes: Routes = [
  {
    path: '',
    redirectTo: 'form'
  },
  {
    path: 'form',
    component: SecretFormComponent,
    canActivate: [TermsGuard]
  },
  { path: 'terms', component: SecretTermsComponent }

  // otherwise redirect to form
  { path: '**',  redirectTo: 'form' }
];

Answer 1

您的问题很可能是因为您使用默认的PathLocationStrategy。这样，当您在浏览器的地址栏中输入路径的直接URL时，它仍然向服务器发出请求，该服务器无法找到您路由时命名的资源（并且正确地如此）。服务器可能配置为每当找不到资源时重定向到主页。

如果您切换到HashLocationStrategy，则不会向服务器发出任何请求，并且在浏览器中输入直接路由URL将起作用。

只需将其添加到@NgModule注释：

providers:[{provide: LocationStrategy, useClass: HashLocationStrategy}]

Angular2路由在每个URL上进行登录

1 个答案: