打开 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 组件里的内容了。