Question

我创建了一个使用koa.js后端的Angular5应用程序。出现了一个问题，我无法实现，我希望用户能够根据发送给他们的电子邮件中的链接访问应用程序上的不同外部页面。为了进一步澄清这个问题，这里有一个解释。

应用程序有一个登录页面，默认情况下在应用程序引导时加载。此登录页面使用AuthGuard查看用户是否已登录，如果是，则将其重定向到主页。

这是路线文件：

const appRoutes: Routes = [

    { path: 'acceptinvite', component: SignupComponent, canActivate: [ PublicGuard ]},
    { path: 'forgottenpassword', component: ResetPasswordComponent, pathMatch: 'full' },
    { path: 'login', component: LoginComponent, pathMatch: 'full' },

    // User Section
    { path: 'users', component: UsersDashboardComponent, canActivate: [ SuperUserGuard ], pathMatch: 'full'},
    { path: 'users/register-user', component: RegisterComponent, canActivate: [ SuperUserGuard ], pathMatch: 'full' },
    { path: 'users/edit-user/:username', component: EditUserComponent, canActivate: [ SuperUserGuard ], pathMatch: 'full' },

    { path: '', component: HomeComponent, canActivate: [AuthGuard], pathMatch: 'full' },   



    // otherwise redirect to home
    { path: '**', redirectTo: '', pathMatch: 'full' }
];

export const routing = RouterModule.forRoot(appRoutes, { useHash: true, enableTracing: true });

有问题的AuthGuard

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(
        private _router: Router,
        private _alertService: AlertService
    ) {}

    canActivate() {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page
        this._alertService.success(titles.error, messages.authentication.loggedOut, true);
        this._router.navigate(['/login']);
        return false;
    }

}

通过本地url degould-login.dev访问应用程序，这是我本地nginx配置中的代理传递设置，指向本地主机上的端口4000。

现在，我的应用程序具有添加用户的功能，并且用户可以请求密码重置电子邮件。这两个都将向用户发送一封电子邮件，其中包含指向应用程序的生成链接以及用于检查链接是否有效的令牌。发送给用户的这些链接的示例如下：

http://degould-login.dev/#/acceptinvite?key=e1061fd2-85de-42b9-89a0-ac8667bd1b84

和

http://degould-login.dev/#/forgottenpassword?key=e1061fd2-85de-42b9-89a0-ac8667bd1b84

我已经设置了这些组件，正如您在我的路线文件中看到的那样，他们不会在AuthGuard后面检查登录，因为这些是面向外部的页面。问题是，当用户点击此链接时，链接会将它们带到Angular引导程序运行的应用程序，并且它们总是被重定向回登录页面（因为这是应用程序路由文件中的默认路由）。我希望将用户重定向到ResetPasswordComponent组件或SignupComponent组件，具体取决于上面给出的链接。

无论如何，要在应用程序中实现此功能，还是必须在应用程序之外创建单独的页面才能实现这两个要求？我想也许可以将变量从我的Node层传递给Angular bootstrap，但我似乎无法让它工作。

为清楚起见，这是我的Koa.JS主路由文件，它调用index.html文件启动Angualr引导程序。

index.js（Koa路线档案）

import KoaRouter from 'koa-router';
import fs from 'fs';

const indexRoutes = KoaRouter();

const LOAD_HTML = function() {
    return new Promise((resolve, reject) => {
        fs.readFile(appRoot + '/../client/index.html', {}, (err, data) => {
            if(err) return reject(err);
            resolve(data);
        });
    });
};

indexRoutes.get('/', async (ctx, next) => {
    ctx.body = await LOAD_HTML();
});

export default indexRoutes;

当Angular5引导时，重定向到不同的默认路由/组件

0 个答案: