Как настроить аутентифицированные и неаутентифицированные маршруты в Angular с начальной точкой /? - PullRequest
Новая
       28

Как настроить аутентифицированные и неаутентифицированные маршруты в Angular с начальной точкой /?

0 голосов
/ 05 июля 2019

В моем приложении Angular я хотел бы иметь набор маршрутов для неаутентифицированных пользователей и набор маршрутов для аутентифицированных.Например, вы не сможете войти на страницу входа в систему / login при аутентификации.

Это я могу легко настроить.Настоящая проблема возникает, когда я хочу, чтобы «отправной точкой» для обоих сценариев была /.Я имею в виду, что при первом входе на веб-сайт (конечно, не прошедший проверку подлинности) вы должны видеть страницу приветствия как http://example.com/. Когда вы входите в систему и проходите аутентификацию, вы также должны видеть URL-адрес как http://example.com/.

Сначала у меня был AppComponent рендер PublicComponent, если он не был аутентифицирован, и мой маршрут, если он аутентифицирован.Это работало до тех пор, пока мне не пришлось реализовывать больше страниц для неаутентифицированных пользователей, и для этого не требовался маршрутизатор;PublicComponent было недостаточно.

Я пробовал несколько вещей, но ни одна из них не работала.Либо компонент не может быть найден в навигации, либо он не отображается.

Прямо сейчас у меня есть маршруты 

    {
        path: "",
        component: PublicComponent  // unauthenticated
    },
    {
        path: "pageA",
        component: PageAComponent   // unauthenticated
    }
    {
        path: "",
        component: HomeComponent,   // authenticated
        outlet: "authenticated"
    },
    {
        path: "pageB",
        component: PageBComponent,   // authenticated
        outlet: "authenticated"
    },
    {
        path: "pageC",
        component: PageCComponent,   // authenticated
        outlet: "authenticated"
    },
    {
        path: "**",
        component: PageNotFoundComponent
    }

app.component.html: 

  <div *ngIf="isAuthenticated(); else notAuthenticated">
    <router-outlet name="authenticated"></router-outlet>
  </div>
  <ng-template #notAuthenticated>
    <router-outlet></router-outlet>
  </ng-template>

Кажется, что маршруты без проверки подлинности (без выхода) работают должным образом.Я могу перемещаться между ними.При входе в маршрут с аутентифицированным выходом он переходит на шаблон, в данном случае PageNotFoundComponent.Это нормально.

Когда вы входите в систему и становитесь аутентифицированным пользователем, HomeComponent приветствует меня в / как следует, но, похоже, также обгоняет другие маршруты.Например, при вводе / pageB HomeComponent инициализируется и снова отображается.Поэтому я попытался дать ему полное совпадение путей, чтобы не допустить переопределения других путей. 

...
    {
        path: "",
        component: HomeComponent,
        outlet: "authenticated",
        pathMatch: "full"
    },
...

А теперь остальные страницы просто пустые.Компоненты не отображаются так, как будто они не могут их найти, но ошибок также нет.Я могу ввести любой бессмысленный URL-адрес и получить пустую страницу.

Я отказываюсь верить, что это невозможно сделать.Итак, любая помощь или совет с благодарностью!Спасибо!

Редактировать

Да, я пробовал AuthGuard, но пока не смог заставить его работать с моими настройками.

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Порядок маршрутов в конфигурации имеет значение, и это предусмотрено проектом. Маршрутизатор использует стратегию выигрыша первого совпадения при сопоставлении маршрутов, поэтому более конкретные маршруты следует размещать над менее конкретными маршрутами.

Также, для безопасности маршрута следует использовать охрану маршрута, см. https://angular.io/api/router/CanActivate

0 голосов
/ 05 июля 2019

Вы должны использовать AuthGuard для реализации этого, а затем указать в своем маршруте, какая ссылка применима к authGuard, как это. 

{
    path: "pageC",
    component: PageCComponent, : canActivate: [AuthGuard]
},

Затем вы можете использовать угловой CLI для генерации AuthGuard, который выглядит примерно так 

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from 
'@angular/router';
import { AuthService } from '../services/auth.service';
import { Observable } from 'rxjs';



@Injectable()
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}

canActivate(
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean> | boolean {
       if (this.auth.authenticated) { // This is the injected auth service which depends on what you are using
            return true; 
           }

       console.log('access denied!')
       this.router.navigate(['/login']);
       return false


   }

}

Вы также можете использовать ссылку ниже для получения дополнительной информации https://angular.io/api/router/CanActivate

...