用户登录

打开 AuthGuard ,在这个守卫里可以使用 AuthService 服务上提供的一些东西,先把它注入进来,在守卫类里添加一个 constructor,private authService,类型是 AuthService。

在守卫的 canActivate 方法里,可以检查一下用户的登录状态,判断一下,如果 this.authService.isLoggedIn 是 true,说明用户已经登录了,这种情况可以让这个方法 return true 。

不然可以把用户带到登录页面,让用户登录,这里需要用到 Router 提供的功能,可以把它也注入进来,在构造方法的参数里,添加一个 private router,类型是 Router。

然后在 canActivate 方法里,用一下 this.router.navigate,一个数组,里面添加一个 '/demo/login' 。

预览

下面到浏览器上试一下,先打开 Demo,然后点击 Admin ,路由用了 AuthGuard 守卫,在守卫的 canActivate 方法里,会检查用户的登录状态,如果没有登录,就会把用户带到这个 demo/login 页面。

按一下 Login 按钮,登录成功以后,再点击打开 Admin,这样就可以正常显示 AdminComponent 组件里的内容了。

在守卫里使用服务《 Angular:守卫 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点