0

在用户登录之前,我正在使用 AuthGuard 保护组件。AuthGuards 可以工作,但是每当对组件进行更改并保存时,页面都会自行刷新并变为空白,并且控制台中没有错误。

我查看了 Stack Overflow 上发现的类似问题,但问题不同,还没有找到解决方案。

应用程序路由.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HomeComponent } from './home/home.component';
import { AuthguardService } from './authguard.service';
import { MembersComponent } from './members/members.component';
import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
import { TicketsComponent } from './tickets/tickets.component';


export const routes: Routes = [
    { path: '', component: LoginComponent },
    {
        path: 'app-home', component: HomeComponent,
        canActivate: [AuthguardService],
        children: [
            { path: 'login', component: LoginComponent },
            { path: 'navigation', component: NavigationComponent },
            { path: 'member', component: MembersComponent },
            { path: 'subscription', component: SubscriptionsComponent },
            { path: 'ticket', component: TicketsComponent },
        ]
    },
    { path: '**', redirectTo: '' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [LoginComponent]

authguard.service.ts:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { LoginService } from './login.service';
@Injectable({
  providedIn: 'root'
})
export class AuthguardService implements CanActivate {
  constructor(private loginService: LoginService, private router: Router) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    const token = this.loginService.getToken();
    if (!token) {
      this.router.navigate(['/']);
      return false;
    }
    return true;
  }
}

我希望新更改能够立即可见,每当进行新更改时,不必一直返回登录页面,而是再次登录,然后返回组件查看新更改。

4

3 回答 3

0

路径匹配:'完整'

您需要添加pathMatch: 'full'path: ''路由,否则 Angular 路由器将在应用程序加载时匹配它而不解释所有 URL。

{ path: '', component: LoginComponent, pathMatch: 'full' },

基本上,pathMatch: 'full'意味着整个 URL 路径需要匹配并被路由匹配算法消耗。

重复路线

此外,您有一条重复的路线指向LoginComponent... 我将删除app-home/login后面的路线,AuthGuard因为它需要您登录才能访问它:

{ path: '', component: LoginComponent, pathMatch: 'full' },
{
    path: 'app-home', component: HomeComponent,
    canActivate: [AuthguardService],
    children: [
        { path: 'login', component: LoginComponent }, // <= remove this route
        { path: 'navigation', component: NavigationComponent },
        { path: 'member', component: MembersComponent },
        { path: 'subscription', component: SubscriptionsComponent },
        { path: 'ticket', component: TicketsComponent },
    ]
}
于 2020-03-23T12:32:28.127 回答
0

感谢大家的帮助,抱歉让您久等了!但我终于找到了我的问题的答案。好像是我一开始写的错别字。。

索引.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="./"

base href="./" 改为 base href="/"

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="body-app">
  <app-root></app-root>
</body>
</html>
于 2020-03-31T10:01:05.917 回答
0

你可以像这样使用它

export const appRoutes : Routes=[
{ path : '' , component : HomeComponent},
{ path : '',
    runGuardsAndResolvers:'always',
    canActivate:[AuthGuard],
    children:[
        { path: 'members', component: MembersComponent },
        { path: 'member/edit', component: MemberEditComponent }
    ]
},

{ path : '**' , redirectTo : '' , pathMatch : 'full'}

];

于 2020-03-23T13:09:10.363 回答