Question

我正在使用ng2-adal进行身份验证。验证后，Angular 4路由丢失。在运行项目时，主页网址为：“http://localhost:31334/index.html/home”。在成功验证后，我导航到路由为：this.router.navigate(["/upload"])。但是，在成功进行身份验证后，浏览器会将网址显示为：http://localhost:31334/upload。因此，页面CSS丢失，页面无法正常显示。 app.route.ts 文件显示为：

export const router: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'upload', component: UploadComponent },
    { path: 'explore', component: ExploreComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

身份验证服务如下：

import { Injectable } from '@angular/core';

@Injectable()
export class SecretService 
{
    public get adalConfig(): any {
        return {
            tenant: 'xxxxxxxxxxxxxxx.onmicrosoft.com',
            clientId: 'xxxxyyyyzzzzaaaabbbb',
            redirectUri: window.location.origin + '/',
            postLogoutRedirectUri: window.location.origin + '/'
        };
    }
}

更改为以下内容，在成功验证后保留URL：http://localhost:31334/index.html/，并且不会导航到“上传”。之后，点击“上传”链接会显示“上传”页面，其中包含所有CSS和格式。

export class SecretService 
    {
        public get adalConfig(): any {
            return {
                tenant: 'xxxxxxxxxxxxxxx.onmicrosoft.com',
                clientId: 'xxxxyyyyzzzzaaaabbbb',
                redirectUri: window.location.origin + '/index.html',
                postLogoutRedirectUri: window.location.origin + '/index.html'
            };
        }
    }

单击按钮单击导航到this.router.navigate(["/upload"])而不进行身份验证会成功显示上载页面。

要解决此问题，我在index.html中添加了<base href="/index.html/">，并在身份验证组件中使用了window.location.origin + "/index.html"。同样在根组件构造函数中，我重定向到home组件：this.router.navigate(['home']);

这会重新加载角度上下文，我无法保持状态，就像用户总是被报告为未经身份验证一样，即使在成功验证后我也会重新加载角度上下文。

请建议如何实现正确的行为。

Answer 1

尝试在 index.html 的<base href="/index.html/">中添加<head>。

认证后{4 44}上下文丢失

1 个答案: