Question

一旦我让用户登录我的应用程序，我想强制重定向到门户页面。但是，当我调用router.navigate（）时会发生3件事情... 1）应用程序重定向到/ portal。 2）应用程序然后立即使用电子邮件地址和密码作为查询字符串重定向到/ portal。 3）应用程序似乎以某种方式“重置”，丢失了appState.User（完全“忘记”用户已经登录），因此应用程序将我重定向回原始登录页面。这有什么问题？

这一切都发生在onSubmit中，由此按钮触发：

<button type="submit" (click)="onSubmit(Form)">Sign in</button>

这是onSubmit代码：

public onSubmit(form: EmailForm): void {
    this.apiLogin.LoginUser(form.EmailAddress, form.Password).subscribe(
        (user: LoginUser) => {
            if(user.UserToken == null) {
                this.addValidationError("Invalid username and/or password.");
            }
            else {
                this.appState.setUser(user);
            }
        },
        (err) => {},
        () => {
            this.router.navigate(['/portal']);
        }
    );
}

这是我的路线设置......

const appRoutes: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full' },
    { path: 'portal', component: PortalComponent, canActivate: [AuthGuard] },
    { path: '**', component: PageNotFoundComponent }
];

您可能不需要它，但这是我在门户路线上使用的AuthGuard服务。感谢@Sasxa helping me setup this AuthGuard。

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private appState: ApplicationState, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let url: string = state.url;
        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        if (this.appState.User.UserToken) return true;

        this.navToLogin(url);
        return false;
    }

    private navToLogin(redirUrl: string) {
        this.router.navigate(['/']);
    }
}   // end class

Answer 1

我明白了。我犯了一个小错误，使用（点击）而不是（ngSubmit）。修正了这种方式：

(ngSubmit)="onSubmit(Form)"

表单提交后无法强制路由到门户网站

1 个答案: