angular7.x-3项目

login页面布局完成后，需要调用接口：base-service放到项目中，添加依赖：AppCommon（又依赖session和base64）
app/widget/script/session.ts：

export class session {
  static set(key: string, value: any) {
    sessionStorage.setItem(key, JSON.stringify(value));
  }

  static get(key: string) {
    const d = sessionStorage.getItem(key);
    if (!d) {
      return d;
    }
    return !!d ? JSON.parse(d) : '';
  }

  static remove(key: string) {
    sessionStorage.removeItem(key);
  }

  static clear() {
    sessionStorage.clear();
  }

  static count() {
    return sessionStorage.length;
  }
}

app/common/app-common.ts：

import {session} from '../widget/script/session';

export class AppCommon {
  // 租户
  private static _tenants;

  // 获取租户信息
  static get tenants() {
    if (!this._tenants) {
      this._tenants = session.get('_tenants');
    }
    return this._tenants;
  }

  // 设置租户信息
  static set tenants(value) {
    this._tenants = value;
    session.set('_tenants', value);
  }
}
// .................其他的一些

调用接口的时候，需要代理！proxy.conf.json；修改
package.json：

// --disable-host-check true
"start": "ng serve --proxy-config proxy.conf.json --port 4200",

点击登录按钮：（各个信息都要session存储的）
校验是否已经登录状态（否的话，登录=>加密），
获取租户信息（租户所有信息和当前租户信息），
获取公共应用的信息（公共应用和当前应用），
获取用户信息（），
跳转到pages this.router.navigate(['pages']);

注：如果某个步骤发生错误，需要调用logout接口，退出登录信息！
密码错误三次，需要验证码登录（防暴力破解）

pages页面布局：
HTML：

  
  

    


    
    


    
    

      Powered by ksbk
    
  
  
  

    

      菜单折叠
    
    

      
    
  

css：

.pages-container {
  height: 100%;

  /**自己的样式***/
  display: flex;
  .pages-left {
    width: 200px;
    position: relative;
    .menu-top {
      background: #00284d;
      height: 60px;
    }
    .menu-content {
      height: calc(100% - 60px);
      overflow: auto;
      padding-bottom:60px;
    }
    /*固定在底部，不动=>给content一个h，且有滚动条*/
    .menu-bottom {
      width: 100%;
      position: absolute;
      bottom: 0px;
      left: 0;
      text-align: center;
      height: 60px;
      background: #031f3b;
      color: #fff;
    }
  }
   .pages-left.is-collapsed {
    width: 80px;
  }
  .pages-right {
    flex: 1;
    position: relative;
    .right-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background: #e1b5af;
    }
    .right-main {
      height: calc(100% - 60px);
      background: #8b90d4;
      margin-top: 60px;
      // 右侧正文部分，有滚动条，但是整体没有滚动条！
      overflow: hidden;
      overflow-y: auto;
    }
  }
}

ts：

/**
 * 折叠菜单
 */
public isCollapsed = false;
menuFold() {
  this.isCollapsed = !this.isCollapsed;
}