Angular 应用程序在刷新时返回默认（主页组件）

Question

My App is working fine so far beside that my router brings me back to the Default Route.到目前为止，我的应用程序运行良好，除了我的路由器将我带回默认路由。 For Example: I am on localhost:4000/Settings than refresh: and i land on localhost:4000 That happens on all sites.例如：我在 localhost:4000/Settings 上而不是刷新：我登陆 localhost:4000 这发生在所有站点上。

Anybody has an idea why this happens?有人知道为什么会这样吗？ btw.顺便提一句。 i didnt set a Default rout though.我没有设置默认路由。

This is my Routing Module:这是我的路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { MediaComponent } from './media/media.component';
import { RegisterComponent } from './register/register.component';
import { AuthGuard } from './auth.guard';
import { SettingsComponent } from './settings/settings.component';
import { LoginComponent } from './login/login.component';


const routes: Routes = [
  {path: '', component: LoginComponent},
  {path: 'Register', component: RegisterComponent},
  {path: 'Home', component: HomeComponent, canActivate:[AuthGuard]},
  {path: 'Media', component: MediaComponent, canActivate:[AuthGuard]},
  {path: 'Settings', component: SettingsComponent, canActivate:[AuthGuard]}
];

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

AuthGuard:身份验证：

canActivate(   
  route: ActivatedRouteSnapshot, 
  router: RouterStateSnapshot): Observable<boolean> {
  return this.afAuth.authState.pipe(
    take(1),
    map(user => !!user),
    tap(loggedIn => {
      if (!loggedIn) {
        console.log('Access Denied');
        window.alert('kein Zugang bitte Registrieren oder einlogen')
        this.router.navigate(['Login']);
      }
    })
  );
}

Index.html:索引.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Luke's Page</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

App.Component:应用程序组件：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

Answer 1

Try putting you default route last试着把你的默认路线放在最后

const routes: Routes = [
  {path: 'Register', component: RegisterComponent},
  {path: 'Home', component: HomeComponent, canActivate:[AuthGuard]},
  {path: 'Media', component: MediaComponent, canActivate:[AuthGuard]},
  {path: 'Settings', component: SettingsComponent, canActivate:[AuthGuard]},
  {path: '', component: LoginComponent},
];

The router chooses the first one it matches to.路由器选择它匹配的第一个。

Angular 应用程序在刷新时返回默认（主页组件）

问题描述

1 个解决方案

解决方案1
0 2020-05-12 17:52:47

Angular 应用程序在刷新时返回默认（主页组件）

问题描述

1 个解决方案

解决方案1 0 2020-05-12 17:52:47

解决方案1
0 2020-05-12 17:52:47