Question

我在Angular 2应用程序中使用Auth0身份验证。

我的应用程序运行localhost时一切正常，但是当我在服务器上运行它（在我的域上）时，我卡住了。

我的问题似乎出现在路线上，但我知道的一切是：我猜。

的问题：

我可以使用Angular应用程序中的Auth0进行登录（没问题，无论是本地主机还是服务器 - 也是注销）。登录后，应用程序重定向到我的控制页面，没有问题，在应用程序内部我有菜单，我的其他页面及其路线等。

在localhost中确定，在登录后在服务器上我无法在我的应用程序中的页面之间导航。一切都出错了，我刚刚得到一个404页面（即使我刚刚刷新）。

我也使用JQuery和Materialize 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>

谢谢！

Answer 1

我相信在我的ng2应用程序中实现Auth0时，我遇到了类似的问题。它与您实现路由的方式有关。您需要使用HashLocationStrategy.这需要将其添加到app.module.ts中的提供者数组：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

添加完成后，您可以按照以下指南正确实现auth0的哈希路由（如果您使用的是更新版本的ng2，请使用解决方法＃2）：

How to use the HashLocationStrategy with the Auth0 Lock widget for user login

Angular 2与Auth0路由错误404

1 个答案: