Маршрутизация с использованием метода хештайга ломает приложение Вход

Я новичок в Angular 2, и у меня есть следующая проблема с моими маршрутами. Мое приложение использует Auth0 для аутентификации пользователя, и у меня есть моя главная страница под http://localhost:3000/ и страница профиля под http://localhost:3000/profile.Маршрутизация с использованием метода хештайга ломает приложение Вход

У меня был проблема, что при обновлении страницы профиля я получил не может получить ошибку 404. Этой ошибки я решена с помощью хэш-подход

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

для моих маршрутов, как я нашел в постах, как этот : Angular 2 : 404 error occur when i refresh through Browser

Моя проблема теперь в том, что с помощью этого подхода хэша я больше не могу использовать логин, он возвращает ошибку.

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL >Segment: 'access_token' Error: Cannot match any routes. URL Segment: 'access_token' at 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(); 
    }

источник

2016-12-31 Battalgazi

Этот [ответ] (http://stackoverflow.com)/a/39701248/204699) к аналогичному вопросу (* Как использовать HashLocationStrategy с виджем Auth0 Lock для входа пользователя *) может представлять интерес. –

Да, это точно проблема, я буду смотреть на это. То, что я на самом деле сделал, это удалить хэш-стратегию, и теперь я управляю им с моим сервером таким образом, чтобы обновление всегда срабатывало: app.all ('/ *', function (req, res, next) { res.sendFile (путь. join (__ dirname, './client', 'index.html')); }); – Battalgazi

Проблема заключается в том, что при перезагрузке, вы на самом деле пытается найти файл "Профиль" в вашем сервере (бэкенд). Вы действительно хотите, чтобы все запросы обрабатывались угловым2 (front-end). Используя hashLocationStrategy, ваша страница профиля теперь находится на http://localhost:3000/#/profile.

Другая ошибка, когда у вас есть {путь: «», ..}, так что все URLs соответствует этому пути (потому что все URLs не имеют «ничего» в начале), так что вы должны сделать это:

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

Я не знаю, решила ли эта проблема, но попробуйте эти изменения и выполните поиск, как настроить HashLocationStrategy (общий на app.module.ts)

источник

2016-12-31 15:36:59

Маршрутизация с использованием метода хештайга ломает приложение Вход

ответ

Смежные вопросы