Question

我正在使用实现延迟加载的angular 9。在开发和生产过程中，如果我手动刷新页面，它总是将用户带到剧本页面。我尝试了Internet上的所有解决方案，但没有一个对我有帮助。我还尝试使用useHash，但对我没有帮助。

只有经过身份验证的人才能访问这些路由，因此仅在经过身份验证的人中发生

应用路由文件

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 { }

我的孩子前往剧本的路线

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']);
      }
    }

Answer 1

问题很简单。

在您的根组件中，如果用户通过了身份验证，您会将其重定向到playbook路由。

每次应用重新加载根组件中的代码时，都会对其进行初始化。因此，您需要将其从构造函数中删除。

您可以通过身份验证保护和身份验证服务控制重定向。

让我知道您是否想发布一个有关警卫和服务的示例。

更新

在auth服务中添加以下属性：

public redirectUrl: string;

将激活的路由服务注入到构造函数中：

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;
  }
}

在应用程序路由模块中保护自己的警卫。

Angular 9刷新将返回到仪表板页面

1 个答案: