angular路由守卫及后台数据交换

项目框架搭建完成，如果只是静态页面，就可以开始写内容及修改样式了。但一般情况下我们还需要一些路由上的设置，当然也少不了与后台的数据交换。如

• 进入页面前判断是否登录，未登录跳转登录页；
• 页面展示之前从后台获取要展示的数据；
• 如果当前页为表单，在用户离开页面时提示是否保存表单内容

路由守卫

路由守卫有四种类型

• CanLoad 表明路由是否可以被加载（如页面数据获取完成后加载页面）。
• CanActivate 是否允许进入该路由（如未登录时跳转登录）。
• CanActivateChild 是否可以进入子路由（如权限不足无法查看）。
• CanDeactivate 路由离开的时候进行触发的守卫（如提示是否保存未完成表单）

这里我做了登录的判断

此过程中如果进行页面跳转需要路由守卫来验证,如果sessionStorage中有用户登陆则执行跳转到成功的home.html,反之跳转到login.html中.

1. 在login.component.html 中添加点击事件，点击按钮登陆(click)="login()"。添加输入框，绑定登录需要的数据，并做双向绑定 [(ngModel)] ="user.uName"，会自动传参到login.component.ts。注意 input 中必须绑定 name 不然无法传值。
2. 在login.component.ts中定义逻辑关系
   public ：（定义数据）
   constructor