防止重定向在 Angular 4 中的浏览器中写入 url

Question

我无法将用户踢出到根 url

以下代码不起作用

路由器

export const RouteDefinitions: Routes = [

  {
    path: 'home',
    component: LandingPageComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'holmes',
    component: HolmesMasterComponent,
    canActivate: [AuthGuard],
    children: [{
      path: 'unauthorized',
      component: UnauthorizedComponent
    }]
  },

  {
    path: 'his',
    component: MasterComponent,
    canActivate: [AuthGuard],
    children: [{
        path: '',
        component: HisParentComponent
      },
      {
        path: 'group',
        component: GroupListComponent
      },
      {
        path: 'test',
        component: TestComponent
      },
    ]
  },
  {
    path: '**',
    component: LandingPageComponent,
    canActivate: [AuthGuard]
  }
];

我需要做些什么改变才能让它发挥作用？

auth.guard.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import{ AuthService} from '../Services/auth.service'
import { Appconfig } from '../Content/Config/AppConfig';
import { Observable } from 'rxjs/Observable';


@Injectable()
export class AuthGuard implements CanActivate {

    UnauthorizedCode:number=401;
    constructor(private router: Router,private  authService:AuthService ) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {    

     this.someservice.authenticateUserLocalDB();
        return true;

    }
}

请帮帮我

菜单重定向

<div id="sidebar-wrapper">
  <aside id="sidebar" class="main-sidebar">
      <section class="sidebar">
          <ul class="sidebar-menu" id="sidemenu">
              <li class="treeview" *ngFor="let menu of menuData">

                  <!-- Visible for only Menu with no child items -->
                  <a routerLink="{{menu.Url}}" routerLinkActive="active" *ngIf="menu.childMenus.length==0">
                      <i class="{{menu.Img}}"></i>
                      <span style="color: #cccccc !important;">{{menu.MenuName}}</span>
                  </a>
                  <!-- Visible for only Menu has child items -->
                  <a href="#" *ngIf="menu.childMenus&& menu.childMenus.length>0">
                      <i class="{{menu.Img}} "></i> <span style="color: #cccccc !important">{{menu.MenuName}}</span>
                      <!--Siddappa Testing-->
                      <span class="pull-right-container">
                          <!--<i class="fa fa-angle-right pull-left"></i>-->
                          <i class="fa fa-angle-right" onClick="($(this)[0].className == 'fa fa-angle-right')?$(this)[0].className='fa fa-angle-down':$(this)[0].className='fa fa-angle-right'" style="float: right !important;"></i>
                      </span>
                  </a>
                  <ul class="treeview-menu" style="display: none;" *ngIf="menu.childMenus.length>0">
                      <li *ngFor="let child1 of menu.childMenus">
                          <a routerLink="{{child1.Url}}" *ngIf="child1.childMenus.length==0">
                              <i class="{{child1.Img}}"></i>
                              {{child1.MenuName}}

                          </a>
                          <a href="#" *ngIf="child1.childMenus.length > 0"><i class="{{child1.Img}}"></i> {{child1.MenuName}}
                              <span class="pull-right-container">
                                  <i class="fa fa-angle-right pull-left"></i>
                              </span>
                          </a>
                          <ul class="treeview-menu" style="display: none;" *ngIf="child1.childMenus.length>0">
                              <li class="treeview" *ngFor="let child2 of child1.childMenus">
                                  <a routerLink="{{child2.Url}}"><i class="fa fa-circle-o"></i> {{child2.MenuName}}
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
          </ul>
      </section>
  </aside>
</div>

Answer 1

也许尝试使用redirectTo:

{
    path: 'home',
    component: LandingPageComponent,
    canActivate: [AuthGuard]
},
{
    path: '**',
    redirectTo: 'home'
}

编辑您也可能更喜欢使用空路径重定向：