Angular路由器.navigate在canActivate()中不适用于子路由
创始人
2024-10-28 02:32:57
0

这是因为当使用navigate方法时,路由守卫会阻止导航到未激活的子路由。为了解决这个问题,我们需要使用路由器的navigateByUrl方法来导航到子路由。

以下是示例代码:

import { Router, ActivatedRoute } from '@angular/router';
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private route: ActivatedRoute) {}

  canActivate() {
    if (isAuthenticated()) {
      return true;
    } else {
      // Navigate to login page with the current URL as a query string parameter
      this.router.navigateByUrl('/login?returnUrl=' + this.route.snapshot.url.join('/'));
      return false;
    }
  }
}

在这个示例中,我们使用了navigateByUrl方法来导航到/login子路由,同时将当前URL作为查询字符串参数一起传递。这样,用户在成功登录后将返回之前的URL。

我们需要确保在定义路由时将子路由的定义放在父路由的后面,以确保子路由成功地激活。例如:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], children: [
    { path: 'profile', component: ProfileComponent }
  ]},
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppRoutingModule { }

在这个例子中,子路由/profile是由父路由/dashboard激活的。

相关内容

热门资讯

关于透视!德普之星透视免费,微... 关于透视!德普之星透视免费,微乐游戏小程序脚本,妙招教程(有挂解惑)-哔哩哔哩1、进入到德普之星透视...
了解透视!德普之星透视辅助,微... 了解透视!德普之星透视辅助,微乐自建房辅助工具在哪,课程教程(有挂规律)-哔哩哔哩1、完成德普之星透...
揭露透视!德普之星透视辅助软件... 揭露透视!德普之星透视辅助软件激活码,微乐小程序辅助工具2025,攻略教程(竟然有挂)-哔哩哔哩一、...
分享透视!hhpoker智能辅... 分享透视!hhpoker智能辅助插件,手机微信小程序游戏破解器下载,绝活儿教程(果真有挂)-哔哩哔哩...
揭露透视!wpk透视工作室,微... 揭露透视!wpk透视工作室,微乐辅助脚本,方式教程(有人有挂)-哔哩哔哩1、wpk透视工作室有没有辅...
详细透视!newpoker脚本... 详细透视!newpoker脚本,微乐小程序免费黑科技下载,举措教程(有挂总结)-哔哩哔哩1、每一步都...
详情透视!aa poker辅助... 详情透视!aa poker辅助,微信小程序微乐陕西挖坑,大纲教程(有挂秘诀)-哔哩哔哩;1、完成aa...
科普透视!wpk私人局有透视吗... 科普透视!wpk私人局有透视吗,微乐江西小程序辅助,资料教程(有挂分享)-哔哩哔哩1)wpk私人局有...
解迷透视!德州圈脚本,微乐四川... 解迷透视!德州圈脚本,微乐四川亲友圈辅助器,技法教程(真的有挂)-哔哩哔哩1、下载好德州圈脚本脚本下...
了解透视!聚星ai辅助工具下载... 了解透视!聚星ai辅助工具下载,微信微乐小程序辅助软件,大纲教程(有挂神器)-哔哩哔哩聚星ai辅助工...