Question

我是Angular 2的新手，我的路线存在以下问题。我的应用使用Auth0进行用户身份验证，我的主页位于http://localhost:3000/下，个人资料页位于http://localhost:3000/profile下。

我遇到的问题是，在刷新配置文件页面时，我得到了一个CAN NOT GET错误404.我使用哈希方法解决了这个错误

RouterModule.forRoot(appRoutes, { useHash: true })

正如我在帖子中找到的那样，我的路线是

：Angular 2 : 404 error occur when i refresh through Browser

我现在的问题是，使用这种哈希方法我不能再使用登录，它会返回错误。

EXCEPTION：未捕获（承诺）：错误：无法匹配任何路由。网址＆gt;细分：'access_token' 错误：无法匹配任何路由。网址细分：'access_token' 在ApplyRedirects.noMatchError

所以我想知道如何解决这个问题。我的代码：

app.routing.ts

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import { HomeComponent }  from './components/home/home.component';
import { ProfileComponent }  from './components/profile/profile.component';
import { ItemsComponent }  from './components/items/items.component';

import {AuthGuard} from './auth.guard';

const appRoutes: Routes= [
{
    path:'',
    component: HomeComponent

},
{
    path:'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]
},
{
    path:'api/items',
    component: ItemsComponent,
    canActivate: [AuthGuard]
}

];



export const appRoutingProviders: any[] = [];


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

的index.html

 //I skipped copying links and so on

  <body>
    <base href="/">
    <my-app>Loading AppComponent ...</my-app>
  </body>

app.component.ts

import { Component } from '@angular/core';
import {Auth} from './services/auth.service';
import {ItemService} from "./services/itemservice/item.service";

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html',
  providers:[ItemService]
})
export class AppComponent  { 
  constructor(private auth:Auth ){

  }

}

app.component.html

 //skipped elements

<nav class="navbar navbar-default ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ngAuth0</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li ><a routerLink="/">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li ><a href="#" (click)="auth.login()" *ngIf="!auth.authenticated()">Login</a></li>
        <li ><a routerLink="/profile" *ngIf="auth.authenticated()">Profile</a></li>
        <li ><a href="#" (click)="auth.logout()" *ngIf="auth.authenticated()">Logout</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

auth.service.ts

import { Injectable }      from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';

// Avoid name not found warnings
declare var Auth0Lock: any;

@Injectable()
export class Auth {
  // Configure Auth0
  lock = new Auth0Lock('7fZnGMP3H3Sl6aTRPQbLWGwPLeHNlm9z', 'myauthID', {});


  constructor() {
    // Add callback for lock `authenticated` event


    this.lock.on("authenticated", (authResult:any) => {
    this.lock.getProfile(authResult.idToken, function(error:any, profile:any){
        if(error){
                throw new Error(error);
        }

        localStorage.setItem('id_token', authResult.idToken);
        localStorage.setItem('profile', JSON.stringify(profile)); //in localStorage only strings can be stored. stringify is needed

      });

    });
  }

  public login() {
    // Call the show method to display the widget.
    this.lock.show();
  }

  public authenticated() {
    // Check if there's an unexpired JWT
    // This searches for an item in localStorage with key == 'id_token'
    return tokenNotExpired();
  }

Answer 1

问题是，重新加载时，您实际上是在服务器（后端）中查找“配置文件”文件。您实际上希望所有请求都由angular2（前端）处理。使用hashLocationStrategy，您的个人资料页面现在位于http://localhost:3000/#/profile。

另一个错误是当你有{path：''，..}所以所有网址都匹配该路径（因为所有网址在开头都没有“），所以你必须做到：

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

我不知道这是否解决了您的问题，但请尝试此更改，并搜索如何配置您的HashLocationStrategy（在app.module.ts上常见）

使用hashtag方法进行路由会中断应用程序登

1 个答案: