angular 9刷新正在返回到仪表板页面

Question

我使用的是angular 9，实现了延迟加载。在开发和生产过程中，如果我手动刷新页面，它总是将用户带到剧本页面。我尝试了互联网上的所有解决方案，但没有一个对我有帮助。我还尝试使用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路由。

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

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

如果你想发布一个警卫和服务的例子，请告诉我。

更新

在身份验证服务中添加以下属性：

public redirectUrl: string;

在构造函数中注入Activated Route服务：

constructor(private route: ActivatedRoute) {}

在全局身份验证方法中(检查用户是否登录(：

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

在auth-guard中：

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

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