使用角度2护卫。刷新页面时如何让用户登录?

时间:2017-09-20 03:07:47

标签: angular guard canactivate

这是我在app.module.ts文件中路由的角度代码。

const appRoutes: Routes = [
{path: '', component: LoginformComponent},
  {path: 'dashboard', component: DashboardComponent, canActivate: [AuthenticationGuard]},
  {path: 'user', children: [
      {path: '', component: UserComponent},
      {path: ':id', component: UserdetailComponent}
    ], canActivate: [AuthenticationGuard]
  },
  {path: '**', component: NotfoundComponent}
];

以下代码代表保护文件。

export class AuthenticationGuard implements CanActivate {

  constructor(private user: UserService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (! this.user.getUserLoggedIn()) {
      this.router.navigate(['/']);
    }
    return this.user.getUserLoggedIn();
  }
}
当我以用户身份登录时,

Guard工作正常。但是如果要刷新它,请记录下来。我想要一种方法让我在刷新页面后仍然登录系统?

这是用户service.ts文件,

@Injectable()
export class UserService {
  private isUserLoggedIn: boolean;
  private username: string;

  constructor() {
    this.isUserLoggedIn = false;
  }

  setUserLoggedIn(username) {
    this.isUserLoggedIn = true;
    this.username = username;
  }

  getUserLoggedIn() {
    return this.isUserLoggedIn;
  }

  getUserName() {
    return this.username;
  }
}

有人可以帮助我..........

1 个答案:

答案 0 :(得分:1)

当您刷新页面时,将再次加载整个应用程序,即组件再次经历它的生命周期。根据应用程序的体系结构,您需要保存身份验证信息,以便在页面刷新之间保持不变。

在处理Angular时最常使用JWT,但情况并非总是如此。如果您正在使用JWT,则应将JWT令牌保存在cookie中,并在应用程序重新加载时检查它是否存在。如果退出则从cookie中读取并正常继续,否则要求用户再次登录。