Question

用户登录后，他们进入表单。其中有名称和用户名。

http://localhost:4200/form

我希望用户填写表格，然后重定向到任何其他页面。我如何确保即使用户更改了url，他们也不会在填表之前不会出现。

app-routing.module.ts

  {
    path: "create-profile/:username",
    component: profileComponent,
    canActivate: [AuthGuard]
  },

现在，当用户登录时，它将转到该组件。

submit(form: any) {
    this.username = form.username;
    this.name= form.name;
    this.auth.changePassword(form).subscribe(data => {
      this.snackBar.open("profile created", "close", {
        duration: 3000
      });
    });
  }

此后，我不确定该怎么办？我还是刚接触棱角

Answer 1

您的解决方案将分为两个步骤：

创建一个服务来存储表单的状态。例如：有效/无效。常见的情况是维护用户是否已登录，具有访问权限等。
为其他路线创建路线保护，并使用＃1中的服务检查表单的状态以允许/禁止导航。

请看看https://angular.io/guide/router#milestone-5-route-guards

Answer 2

在提交中，您可以检查：-

submit(form: any){
  if (form.valid) {
    //write your auth gurd service code here to check 
}
}

在您的路由文件中：你可以这样写

{ path: '', redirectTo:'login', pathMatch="full" canActivate: [AuthGuard]}
{ path: 'login', component: LoginComponent, canActivate: [AuthGuard] }

AuthGuard是您可以编写的服务

除非填写表格，否则角度应保持在同一页面上

2 个答案: