今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 
明天计划的事情：（一定要写非常细致的内容） 
遇到的问题：（遇到什么困难，怎么解决的）

收获：（通过今天的学习，学到了什么知识）

1.路由卫士：

创建路由后，任何用户都能在任何时候导航到任何地方。 但有时候这样是不对的。 该用户可能无权导航到目标组件。 可能用户得先登录（认证）。 在显示目标组件前，你可能得先获取某些数据。 在离开组件前，你可能要先保存修改。 你可能要询问用户：你是否要放弃本次更改，而不用保存它们？ 你可以往路由配置中添加守卫，来处理这些场景。 守卫返回一个值，以控制路由器的行为： 如果它返回 true，导航过程会继续 如果它返回 false，导航过程会终止，且用户会留在原地。

守卫还可以告诉路由器导航到别处，这样也取消当前的导航。 守卫可以用同步的方式返回一个布尔值。但在很多情况下，守卫无法用同步的方式给出答案。 守卫可能会向用户问一个问题、把更改保存到服务器，或者获取新数据，而这些都是异步操作。 因此，路由的守卫可以返回一个 Observable或 Promise，并且路由器会等待这个可观察对象被解析为 true 或 false。

使用路由卫士的方法

利用CANACTIVATE接口及 LOCALSTORAGE

新增卫士服务，负责认证和授权资源

angular6路由卫士设置方法：

新增卫士服务

// src/app/serve/auth-guard.service.ts

import { Injectable } from '@angular/core';

import { Router, CanActivate } from '@angular/router';

@Injectable()

export class AuthGuardService implements CanActivate {

  constructor(public router: Router) {}

  canActivate(): boolean {

    if (localStorage.getItem('username') === null) {      // 验证登录状态

      this.router.navigate(['/login']);                   // 重定向

      return false;

    }

    return true;

  }

}

导入路由模块

// src/app/app.routing.module.ts

import { Routes, CanActivate } from '@angular/router'; // 导入依赖

import { 

  AuthGuardService as AuthGuard 

} from '../app/serve/auth-guard.service';             // 导入服务

const routes: Routes = [

  { path: '', redirectTo: '/login', pathMatch: 'full' },

  { path: 'login', component: AdminLoginComponent },

  {

    path: 'global',

    component: GlobalComponent,

    children: childRoutes,

    canActivate: [AuthGuard]          // 添加验证服务

  }

];

@NgModule({

...

  providers: [ AuthGuard ],        // 添加提供者

})

登录时：

... 

 if (this.data.code === 0) {                //  用户名密码验证成功

      localStorage.setItem('username', 'admin');  

      this.router.navigate([`../global`]);          

        }

...

退出时：

logout() {

    localStorage.removeItem('username');

    this.router.navigate(['/login']);

  }

2.      

1.如何选取本地存储：

根据特性使用，若需要永久存储，则选择localStorage，若需要关闭网页就销毁数据，则选择sessionStorage

2.完全没必要用Cookie吗？

不是，虽然cookie有着诸多缺点，但cookie也有许多不可替代的特性，比如可以灵活的设置过期时间，也可以设置作用域。能在服务器和客户端进行数据交互。

3.WebStorage的数据可以上传到服务器吗？

Webstorage不会传递到服务器端，且webStorage就是为了解决cookie频繁在服务器和客户端交互的弊端而设，webstorage就是为了在客户端存储数据而生，不应舍本逐末。