Angular 路由器不导航到设置 url 而是导航到空 url 路径

Question

我目前正在使用路由器功能开发 angular 应用程序。所有路由似乎都运行良好，直到我发现在成功登录后，我设置的 url 路径，即 '/admin' 将不会被遵循，路由器默认为 ' /'。这是代码：

//login.component.ts
if (this.authService.getUserRole() == 'user' || 'agent') {
window.location.assign('/')
} else if (this.authService.getUserRole() == 'admin') {
window.location.assign('/admin')
}



//app.routing.ts
import {AdminComponent} from './admin-master/admin/admin.component;
import {HomeComponent} from './home/home.component;

const appRoutes: Routes = [
{path: '', component: HomeComponent, pathMatch: 'full'},
{path: 'admin', component: AdminComponent, canActivate: [AuthGuard], data: {permission:{only: ['admin']}}}
]

编辑：（添加 auth.guard.ts）

//auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
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): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

      const permission = next.data["permission"];

      if(this.authService.isLoggedIn() &&
      permission.only.includes(this.authService.getUserRole())) {
        return true;
      } else {
        this.router.navigateByUrl('/logout');
      }
    
  }
  
}

问题：

虽然已经成功登录，但路由器会将用户重定向到空白 url 而不是我在 [=15] 中专门提供的集合 URL =]文件夹。
因为它会重定向到一个空的 URL，home.component.html 中的元素也会显示在我的管理仪表板中，这是我不希望发生的。

总之，如何正确路由以下功能？难道我做错了什么？感谢您的帮助！

Answer 1

替换window.location.assign('/admin')

和

this.router.navigate([‘../admin’], {relativeTo: this.route});

路由器：路由器路线：激活路线

希望这就是你想要的。

Answer 2

您可以使用 Router 而不是 window.location.assign 来导航到不同的 URL 的

示例：

import { Router} from '@angular/router';

/* Login Component */

constructor(private router: Router, private authService: AuthService) { }

navigate() {
    if (this.authService.getUserRole() == 'user' || 'agent') {
        this.router.navigateByUrl('/')
    } else if (this.authService.getUserRole() == 'admin') {
        this.router.navigateByUrl('/admin')
    }
}

查看文档 https://angular.io/api/router/Router

Answer 3

您确定要导航到管理页面吗？我认为你的代码看起来不对。

if (this.authService.getUserRole() == 'user' || 'agent') {
    window.location.assign('/')
} else if (this.authService.getUserRole() == 'admin') {
    window.location.assign('/admin')
}

它应该像下面这样，否则第一个总是正确的，因为 || 'agent'

const role = this.authService.getUserRole();
if (role  === 'user' || role === 'agent') {
    window.location.assign('/')
} else if (role  === 'admin') {
    window.location.assign('/admin')
}

此外，我更喜欢 === 进行值和类型检查。

Answer 4

在我的 app.routing.ts 文件中，我从下面的代码中观察到，删除 {useHash: true} 会导致正确的 URL 重定向。这是因为添加 {useHash: true} 会向我的 url 添加一个额外的 /#，导致默认为空白 URL，因为它不匹配任何路由。

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true, enableTracing: true });

我已将其修改为：

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

注意：我还删除了 enableTracing: true 只是为了清理我的控制台结果。

Angular 路由器不导航到设置 url 而是导航到空 url 路径

Angular router does not navigate to set url but to empty url path

typescript

angular-routing

angular