Question

我具有以下应用程序路由：

const routes: Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    children:
      [
        {
          path: '',
          redirectTo: '/dashboard',
          pathMatch: 'full'
        },
        {
          path: 'dashboard',
          component: DashboardComponent,
          children:
            [
              {path: 'profile', component: ProfileComponent},
              {path: 'user-management', component: UserManagementComponent},
              {path: 'role-management', component: RoleManagementComponent}
            ]
        }
      ]
  },
  {path: 'login', component: LoginComponent},
  {path:'token-verify',component:TwoFactorVerificationComponent}
];

这是我的问题。假设我在dashboard路线上。使用角形路由器导航到/profile或/user-management可以正常工作。但是，如果我遇到以下问题，在路线/dashboard/user-management或/dashboard/role-management上并刷新页面，我将重定向到/dashboard/profile。有什么想法我做错了吗？

这是我的身份验证

import { Injectable } from "@angular/core";
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";
import { Observable } from "rxjs";
import { UserService } from "../services/user.service";
import { TokenService } from "../services/token.service";

@Injectable({
  providedIn: "root"
})
export class AuthGuard implements CanActivate {
  constructor(
    private tokenService: TokenService,
    private userService: UserService
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    console.log(`Requested -> state: ${state.url}`);
    if (this.tokenService.isLoggedIn()) {
      console.log("isLogged in and will return true");
      return true;
    } else {
      console.log("will fail and go to login");
      this.userService.redirectToLogginPage();
      return false;
    }
  }
}

每当我刷新页面时，就会调用auth Guard并打印

Requested -> state: /dashboard/user-management 
auth.guard.ts:26 isLogged in and will return true

以防我登录

经过一番挖掘，我发现如果我在dashboard/user-management上刷新页面，则实际上会调用该组件的OnInit方法，但会在/dashboard/profile中重定向

Answer 1

   const routes: Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    children:
      [
        {
          path: '',
          redirectTo: '/dashboard',
          pathMatch: 'full'
        },
        {
          path: 'dashboard',
          component: DashboardComponent,
 children: [
                  {path: '', redirectTo: 'profile'},
                  {path: 'profile', component: ProfileComponent},
                  {path: 'user-management', component: 
                UserManagementComponent},
                  {path: 'role-management', component: 
                   RoleManagementComponent}
              ]     
   }
      ]
  },
  {path: 'login', component: LoginComponent},
  {path:'token-verify',component:TwoFactorVerificationComponent}
];

Answer 2

所以我终于找到了问题所在。在仪表板组件（父组件）中，这发生在ngOnInit（）

Exception in thread "main" org.renjin.parser.ParseException: Syntax error at 1 68 1 70 68 70: syntax error, unexpected SYMBOL, expecting ','
    at org.renjin.parser.RParser.parseAll(RParser.java:146)
    at org.renjin.parser.RParser.parseSource(RParser.java:69)
    at org.renjin.parser.RParser.parseSource(RParser.java:122)
    at org.renjin.parser.RParser.parseSource(RParser.java:129)
    at org.renjin.script.RenjinScriptEngine.eval(RenjinScriptEngine.java:127)
    at RTest.main(RTest.java:27)

我删除了这一行，它起作用了。原因是在渲染子视图之后，父视图会显示“嘿，子视图返回到父视图”

角路由重定向到父路由，而不是页面刷新中的子路由

2 个答案: