Angular实战项目记录（一）------登录（传递参数，获取返回值，加密密码，路由守卫，localStorage）

需求：angular登录（传递参数，获取返回值，加密密码，local路由守卫，localStorage）

需要的模块

• home.routing.ts
• login.component.html
• login.component.ts
• login.service.ts
• login.guard.ts
• storage.service.ts

步骤：

一，双向绑定input框的账号和密码

login.html

          <input type="text"  name="username"  placeholder="用户名" autocomplete="off" [(ngModel)]="username" >
          <input type="password"  name="password"  placeholder="密码" [(ngModel)]="password">
     	   <span class="redalert" >  {
  {loginErrorInfo}}</span>
            <button type="submit" (click)="login()" >{
  {denglu}}</button>
       

login.ts

 public denglu:string = '登录'
  public username:any ='';
  private password:any ='';

二，将账号和密码（加密）进行处理，向api接口发送请求，传递参数

2.1请求数据
2.1.1在app.module.ts中引入HttpClientModule类注入
app.module.ts (其他的组件没有写，仅写了添加)

//引入组件
import { HttpClientModule } from '@angular/common/http';//通过HTTP协议实现前端应用和后端服务器的通讯

  imports: [  //引入当前模块运行依赖的其他模块
    HttpClient