自定义首页

场景描述：需要给登录页面换风格，又不想修改AFC的代码的时候，可以从这里入手。修改配置文件，代理到已部署好的登录微前端。

配置解析

1.在部署环境的base的config\app-config.json配置文件下，修改配置页面参数。

loginType为normal是AFC本身的登录页面,为micro时需要配合loginPage对象一起使用;

remotePath，如果部署在一个nginx下为‘/’，如果不在，值为部署的微前端环境（注意‘/’不能省略）;

module是微前端的模块标识;

page为当前暴露的页面;

{
  "loginType": "micro",
  "serverUrl": "/",
  "title": "AFCenter",
  "shortTitle": "AFCenter",
  "loginPage": {
    "remotePath": "/",
    "module": "bfp",
    "page": "bfp_login"
  },
  "logoutTo": "/",
  "apiPrefix": {
    "enabled":true,
    "path":"/afc"
  }
}

2.开发环境的代理base\build\webpack.dev.js

'/bfp': {
     target: 'http://localhost:8010/',
 },

3.在微前端下build\mfp.config.js配置对外暴露的页面，例如

 './bfp_login': './src/views/loginPage/index.vue',

登录页面逻辑

登录包含验证码，三方登录和认证登录几个功能

1.其中验证码在初次加载页面是不需要的，在此账号登录失败或者本地登录失败时，展示验证码开启验证。

2.三方登录是点击登录框右上角的扫码按钮，跳转到第三方登录页，登录成功，会重定向到我们的登录页，直接跳转到首页

3.认证登录是三方在判断未登录后，跳转到我们的登录页，url上带有重定向信息，在登录页登录成功需要再次跳转回去

微前端页面的接口以及util包里的方法可以直接引入base的，例如：

import { getKey, getThirdParty, getVerifiedCode, isMustChangePsword, login, loginByScanning, 	oauthLogin } from 'base/api'

具体可以参考bfp-ui下的demo，参考路径：bfp-ui/src/views/loginPage