Angular 2与Auth0路由错误404
问题描述:
我在Angular 2应用程序中使用Auth0身份验证。Angular 2与Auth0路由错误404
在运行本地主机的应用程序中一切正常,但是当我在服务器上运行它时(在我的域中),我卡住了。
我的问题似乎在路线中,但我知道的一切是:我猜。
问题:
我可以做我的角应用通过Auth0登录(没问题,本地主机都和服务器 - 也注销)。登录后,应用程序重定向到我的控制页面,没有问题,并在应用程序内我有菜单,我的其他页面与他们的路线等
在localhost确定,但在服务器上登录后,我可以在我的应用中浏览页面一切都出错了,我刚刚得到了一个404页(即使刚刚刷新)。
我也在使用JQuery和Materialise CSS。在我刷新它的加载并且效果起作用后,JQuery不加载。
代码:
app.routing.ts:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth/auth.guard';
import { HomeComponent } from './components/home/home.component';
import { PainelComponent } from './components/painel/painel.component';
import { ReunioesComponent } from './components/reunioes/reunioes.component';
import { AssociadosComponent } from './components/associados/associados.component';
import { CalendarioComponent } from './components/calendario/calendario.component';
import { TesourariaComponent } from './components/tesouraria/tesouraria.component';
import { DocumentosComponent } from './components/documentos/documentos.component';
const appRoutes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'painel',
component: PainelComponent,
canActivate: [AuthGuard]
},
{
path: 'associados',
component: AssociadosComponent,
canActivate: [AuthGuard]
},
{
path: 'calendario',
component: CalendarioComponent,
canActivate: [AuthGuard]
},
{
path: 'reunioes',
component: ReunioesComponent,
canActivate: [AuthGuard]
},
{
path: 'tesouraria',
component: TesourariaComponent,
canActivate: [AuthGuard]
},
{
path: 'documentos',
component: DocumentosComponent,
canActivate: [AuthGuard]
}
];
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: false})
auth.service.ts:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { tokenNotExpired } from 'angular2-jwt';
declare var Auth0Lock: any;
@Injectable()
export class Auth {
lock = new Auth0Lock('SECRET', 'SECRET.auth0.com', {});
constructor(private router: Router) {
this.lock.on("authenticated", (authResult) => {
this.lock.getProfile(authResult.idToken, (err, profile) => {
if(err)
throw new Error(err)
localStorage.setItem('profile', JSON.stringify(profile));
localStorage.setItem('id_token', authResult.idToken);
this.router.navigate(['/painel'])
})
});
}
public login() {
this.lock.show()
}
public authenticated() {
return tokenNotExpired()
}
public logout() {
localStorage.removeItem('id_token');
localStorage.removeItem('profile')
}
}
sidenav.partial.html:
<ul id="slide-out" class="side-nav fixed">
<li><a href="/associados"><i class="material-icons">group</i>Associados</a></li>
<li><a href="/calendario"><i class="material-icons">event</i>Calendário</a></li>
<li><a href="/painel"><i class="material-icons">new_releases</i>Calendário Próximo</a></li>
<li><a href="/reunioes"><i class="material-icons">forum</i>Reuniões</a></li>
<li><a href="/tesouraria"><i class="material-icons">monetization_on</i>Tesouraria</a></li>
<li><a href="/documentos"><i class="material-icons">attach_file</i>Documentos</a></li>
<li><br></li>
<li class="show-on-med-and-down hide-on-large-only">
<a href="#!" (click)="auth.logout()"><i class="material-icons">close</i>Sair</a>
</li>
</ul>
谢谢!
答
我相信我在我的ng2应用程序中实现Auth0时遇到了类似的问题。它与你实现路由的方式有关。您将需要使用HashLocationStrategy.
这需要app.module.ts
加给你的供应商阵列:
{ provide: LocationStrategy, useClass: HashLocationStrategy },
一旦你已经添加了这个,你可以按照以下的指南来正确地执行哈希与auth0路由(使用变通办法#2如果您使用的是较新的NG2的版本):
How to use the HashLocationStrategy with the Auth0 Lock widget for user login
噢,我想我只是明白你的问题......你运行的是什么Web服务器? – n00dl3
请在问题本身[mcve]中提供所有相关代码,而不仅仅是在第三方网站上。 –
Mike McCaughan我补充说,谢谢你的警告。我希望能帮助更多的人在代码中遇到同样的问题。问题解决了Jack Clancy。 –