angular 9 refre sh возвращает на страницу панели инструментов - PullRequest
Новая
       3

angular 9 refre sh возвращает на страницу панели инструментов

0 голосов
/ 01 мая 2020

Я использую angular 9 с ленивой загрузкой. Во время разработки и производства, если я обновлю sh страницу вручную, пользователь всегда будет перенаправлен на страницу playbook. Я перепробовал все решения из inte rnet, но ни одно из них мне не помогло. Я также попытался использовать useHa sh, который мне не помог.

Только аутентифицированные люди могут получить доступ к этим маршрутам, так что это происходит только для людей, которые аутентифицированы

файл app-routing 

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'admin', loadChildren: () => import('./pages/postLogin/admin/admin.module').then(m => m.AdminModule) },
  { path: 'gallery', loadChildren: () => import('./pages/postLogin/gallery/gallery.module').then(m => m.GalleryModule) },
  { path: 'alias', loadChildren: () => import('./pages/postLogin/alias/alias.module').then(m => m.AliasModule) },
  { path: 'playbook', loadChildren: () => import('./pages/postLogin/playbook/playbook.module').then(m => m.PlaybookModule) },
  { path: 'taskManagement', loadChildren: () => import('./pages/postLogin/taskManagement/taskManagement.module').then(m => m.TaskManagementModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Мой дочерний маршрут для playbook 

const routes: Routes = [
    {
        path: '',
        component: PlaybookEntryComponent,
        children: [
            {
                path: 'blockView',
                component: BlockViewEntryComponent
            },
            {
                path: 'columnView/:type/:columnType/:noOfColumns/:blockId',
                component: ColumnviewComponent
            },
            {
                path: 'exportPdf/:playbookId',
                component: ExportPdfComponent
            }
        ],
    },
];

На данный момент я еще не реализовал охранники, я еще не реализовал их

код app.component.ts 

constructor(private router: Router) {
      if (localStorage.getItem('enableocityAccessToken')) {
        this.router.navigate(['/playbook']);
      } else {
        this.router.navigate(['/login']);
      }
}

Решение для обработки, когда пользователь вошел в систему -

В app.component.ts 

if (path && path.length > 0) {
      this.router.navigate([path.substr(1)]);
    } else {
      if (localStorage.getItem('enableocityAccessToken')) {
        this.router.navigate(['/playbook']);
      } else {
        this.router.navigate(['/login']);
      }
    }

1 Ответ

1 голос
/ 01 мая 2020

Проблема проста.

В вашем компоненте root, если пользователь аутентифицирован, вы перенаправляете его на маршрут playbook.

Каждый раз, когда приложение перезагружается код из компонента root будет инициализирован. Поэтому вам нужно удалить его из конструктора.

Вы можете управлять перенаправлением через службу аутентификации и аутентификации.

Дайте мне знать, если вы хотите опубликовать пример для охраны и обслуживания.

ОБНОВЛЕНИЕ

В службу аутентификации добавьте следующее свойство: 

public redirectUrl: string;

Добавление службы Activate Route в конструктор: 

constructor(private route: ActivatedRoute) {}

В методе глобальной аутентификации (где вы проверяете, вошел ли пользователь в систему или нет): 

// user is logged in case
 this.redirectUrl = this.route.snapshot.queryParams.redirectUrl || '/';

В аутентификации: 

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const { url } = state;

    return this.checkLogIn(url);
  }

  private checkLogIn(url: string): boolean {
    // assuming that in your auth service you have a property of type boolean which will be true if the user is authenticated or false if is not
    if (this.authService.isAuthenticated) {
      return true;
    }

    this.authService.redirectUrl = url;

    // navigates to the login page with extras
    this.router.navigate(['login'], { queryParams: { redirectUrl: url } });
    return false;
  }
}

Защитите свой охранники в модуле app-routing.

...