2
私は角度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();
}
This [answer]（http://stackoverflow.com）/a/39701248/204699）を同様の質問に追加することができます（*ユーザーログインのためにAuth0 LockウィジェットでHashLocationStrategyを使用する方法*）。 –
はい、まさにその問題です、私はそれを見ていきます。私が実際に行ったことは、ハッシュストラテジーを削除することです。これでサーバでこのように管理していますので、常に最新の状態に更新されます：app.all（ '/ *'、function（req、res、next）{ res.sendFile join（__ dirname、 './client'、 'index.html'））; }）; – Battalgazi