Question

我想设置我的Angular路线以执行以下操作：

如果用户未登录，则网站（http://localhost:4200）的着陆页和其他任何路线都应进入LoginComponent。

如果用户已登录，则网站的着陆页面（http://localhost:4200）和所有不匹配的路由都应转到DashboardComponent。如果路由匹配，则应转到正确的Component。

所有匹配的路由都应由AuthGuard保护，后者检查用户是否已登录。如果用户未登录，则应以LoginComponent结尾。（AuthGuard处理此重定向）。

我面临的一个主要问题是我不希望LoginComponent成为我的app.component结构的一部分，而app.component结构中具有路由器出口（例如，页眉，页脚，侧边栏）。相反，我只希望登录页面仅显示LoginComponent.html中的内容。

这是我当前的路线：

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full', canActivate: [AuthGuard] },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'projects', component: ProjectListComponent, canActivate: [AuthGuard] },
  { path: 'projects/new', component: ProjectDetailComponent, canActivate: [AuthGuard] },
  { path: 'projects/edit/:id', component: ProjectDetailComponent, canActivate: [AuthGuard] }
];

Answer 1

AuthGuard方法的一个问题是您可以通过AuthGuard，然后您在后端的会话将过期。但是，直到更改路线，您都不会被踢出去。

为克服这一点，人们通常使用HTTP拦截器。如果任何HTTP请求通过重定向到登录页面（除非您已经在登录页面上）以401 Unauthorized响应，拦截器都会将您踢出。

这样，如果用户不更改路线并开始单击“大约”，并且后端响应401，则即使他们不更改路线，也会被踢出用户。

虽然这不能回答您的问题，但它具有很高的相关性。

希望有帮助。

Answer 2

您可以使用两个不同的布局组件，就像我在应用程序中所做的一样。



    const routes: Routes = [
    {
        path: '',
        component: HomeLayoutComponent,
        canActivate: [AuthGuard],
        children: [
          {
            path: '',
            redirectTo: 'dashboard',
            pathMatch: 'full'
          },
          {
            path: 'dashboard',
            loadChildren: './view/dashboard/dashboard.module#DashboardModule'
          },
          ...
        ]
      },
      {
        path: '',
        component: LoginLayoutComponent,
        children: [
          {
            path: 'login',
            loadChildren: './view/login/login.module#LoginModule'
          }
        ]
      }
    ];

通过这种方式，您可以在LoginLayoutComponent中隐藏应用程序标题和侧边栏（如果存在），但将其保留在HomeLayoutComponent中。

然后在AuthGuard中，应该检查用户是否已登录。如果没有，则

this.router.navigate(['/login']);

应该可以解决问题。

Answer 3

应用路线

const approutes : Routes = [
  {path:"",component:LoginComponent},
  {path:"dashboard",component:DashboardComponent},
];

app.component.ts

import { Component, Input } from '@angular/core';
import {Router} from '@angular/router';
@Component({
  selector: 'login',
  template: `<h1>Hello {{name}}!</h1><a  [routerLink] = "['/dashboard']" class="hvr-ripple-in">Login</a>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class LoginComponent  {
  name:string = "Login here implement your login action !"
   constructor(private _route:Router) {
  }
}

app.component.html

<router-outlet></router-outlet>

navbar.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-navbar',
  template: `<h1>{{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class NavbarComponent  {
  name:string = "Navbar content"
}

footer.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-footer',
  template: `<h1>{{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class FooterComponent  {
  name:string = "Footer content"
}

template.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-template',
  template: `<my-navbar></my-navbar><ng-content></ng-content><my-footer></my-footer>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class TemplateComponent  {  
}

dashboard.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'dashboard',
  template: `<my-template><h1>Hello {{name}}!</h1></my-template>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class DashboardComponent  {
  name:string = "Dashboard content";
}

因此，如果路由路径为空，则使用单独的布局调用登录组件。对于仪表板，由于其被包装在模板组件内部，因此被称为单独的布局。通过这种方式，您可以获取用于登录组件的干净模板。您还可以在路由器中实现CanActivate功能，以限制用户无需登录即可访问页面。

检查一下我提供给您的样本。 https://stackblitz.com/edit/angular-x4jgxs

如果用户未登录，则角路由始终转到登录页面

4 个答案: