Question

我有登录注册和一些与其组件相关的路由。我可以保护loginComponent下的其他路由，但我不希望用户通过登录和注册来手动更改url，从而查看登录组件。

用户可以通过在URL上输入“ /”来登录组件，如果用户LoggedIn，我想避免这种情况

以下是我的路线配置

export const appRoutes: Routes = [

    {path:'',component:LoginComponent},
    {
        path:'',
        canActivate:[AuthGuard],
        children:[
            {path: 'home', component: HomeComponent},
            {path: 'appointments', component: AppointmentsComponent},
            {path: 'appointmentPicker', component: AppointmentPickerComponent},
        ]
    },
    {path:'register',component:RegisterComponent},
    {path:'**',redirectTo:'home',pathMatch:'full'},
  ];

AuthGuard

  export class AuthGuard implements CanActivate {
    constructor(private authService:AuthService,private router:Router){

    }
    canActivate(): boolean{
       if(this.authService.loggedIn()){
         return true;
       }
       else{
         this.router.navigate(['']);
       }
    }
  }

解决方案（已更新） 在这里，我尝试并努力工作正是我想要的。谢谢大家

export class LoginComponent implements OnInit {

  model:any={};
  tokenExist:boolean=false;
  logInWorked:boolean=false;
  constructor(private authService:AuthService,private router:Router) {

   }
  login()
  {
    console.log(this.model);
    this.authService.login(this.model).subscribe(value=>{
      this.router.navigate(['/home']);
      this.logInWorked=true;
      }
    )
  }

  ngOnInit() {
    if(this.logInWorked!=true && this.authService.loggedIn()){
      this.router.navigate(['/home']);
    }
  }

  }

Answer 1

正如我所看到的，您已经写了AuthGuard，那么您只需要签入AuthGuard即可查看该用户是否已经登录。如果用户已登录，则返回false，否则返回true。

Answer 2

我创建了一个Angular模板，用于处理大多数导航情况。查看我项目中的AuthGuard，以获取有关如何实现此功能的示例：https://github.com/francescodist/matFortyTwo/blob/master/src/app/auth/auth.guard.ts

Answer 3

您可以在检查用户是否登录的地方创建新的LoggedGuardService：

export class LoggedGuard implements CanActivate {
    constructor(private authService:AuthService,private router:Router){

    }
    canActivate(): boolean{
       if (!this.authService.loggedIn()){
         return true;
       }
       else{
         this.router.navigate(['']);
       }
    }
}

并使用它：

RouterModule.forChild([
    { path: 'login',
        component: LoginComponent,
        canActivate: [LoggedGuard]
    },

用户登录后如何保护登录和注册组件？

3 个答案: