用户登录

AuthGuard 守卫里实施了 CanActivate,我们把这个守卫用在了 admin 这个路由上,用它看守 admin 路由,只让登录的用户才能访问 admin 这个路由。如果 admin 里面包含了一些子路由,要守卫这些子路由可以使用 CanActivateChild 类型的守卫。

子路由

下面可以去定义两个子路由,打开 Demo 模块的路由模块,在这个 admin 路由里面,添加一个 children,里面添加需要的子路由。

可以先去创建一个组件,ng generate ,生成一个 component ,放在 modules/demo/admin 里面,名字是 admin-dashboard 。

回到项目,继续定义 admin 的子路由,路由的 path 可以是 dashboard,路由的 component 是 AdminDashBoardComponent。

下面再定义一条路由,路由的 path 是 posts,路由的 component,用一下之前我们定义好的 Post 组件。

Admin 组件

打开 Admin 组件的模板文件,在这里要添加一个 router-outlet,用来输出路由的子路由。 在上面可以再添加两个子路由的链接,一组 a 标签,文字是 Dashboard,标签上用 routerLink 设置一下地址,./dashboard,再用 routerLinkActive 设置一下激活状态下的 css 类。

复制一份,修改一下链接文字,Posts ,地址是 ./posts。

预览

在浏览器上可以先试一下,打开 Demo,点击 Admin,提示要登录,按一下 Login,然后再回到 Admin ,控制台上会输出 Auth guard,这个文字是在 AuthGuard 里的 canActivate 方法里输出了。说明打开 Admin 路由的时候,调用了这个守卫里的 canActivate 方法。

再访问一下 Dashboard ,还有这个 Posts 链接 ,这两个路由是 admin 里的子路由,访问它们的时候并没有调用 AuthGuard 守卫里的 canActivate 方法。

canActivateChild

打开 AuthGuard,在这个守卫里,让它实施一下 CanActivateChild,这样在守卫类里需要添加一个 canActivateChild 方法。选中守卫类,按一下 command + . ,选择实施 CanActivateChild 接口,这样会在类里面添加需要的方法。

调一下这个方法的位置,把它放在 canActivate 方法的下面。

在这个方法里,你可以添加需要的代码判断用户是否可以访问子路由。暂时我们先在控制台上输出点文字,用 console.log ,输出 Auth guard canActivateChild. 下面再让方法 return true,方法如果最终 return 的是 false,就不能继续访问,如果 return 的是 true,就可以继续访问。

应用 canActivateChild

守卫子路由,可以使用 canActivateChild。先回到路由模块,可以在这个 admin 路由上,再添加一个 canActivateChild 属性,它的值是个数组,里面添加一个 AuthGuard 。这样就会使用这个 AuthGuard 守卫里的 canActivateChild 来守卫路由的子路由。

预览

回到浏览器再试一下,打开 Demo,点击 Admin,然后 Login, 打开 Admin ,再试着访问一下 Dashboard ,你会发现,控制台上输出了 Auth guard canActivateChild. 再打开 Posts 这个链接,控制台上又会输出一个 Auth guard canActivateChild。

canActivateChild:守卫子路由《 Angular:守卫 》

统计

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

社会化网络

关于

微信订阅号

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