平台登录应用开发

简介（mas5.14开始支持）

项目空间中新建登录项目，里面通过低代码配置方式开发登录页面，页面不再通过主题应用中源码进行开发，平台直接授权发布的登录应用即可加载显示。授权多个登录应用后主题的登录区域采用幻灯片的方式进行切换。

注意

目前针对于5.14版本平台发布的所有主题里动态加载授权登录应用的逻辑都已调整处理，若需使用平台主题，登录应用如果有自定义需要按后边说明方式进行调整；
升级后若系统非使用平台主题，原主题依然可以使用不影响。

主题中如何调整动态加载授权登录应用

如下示例代码块，从缓存中获取loginApps，然后通过UIBlock进行加载显示

<template>
  <div>
    <img class="login-image" :src="loginImage" :onerror="defaultImage"/>
    <div class="login-card">
      <div class="left"></div>
      <div class="right">
        <div slot="header" class="header">
          <NextLogo />
        </div>
        <div class="form-div">
          <el-carousel trigger="click" :autoplay="false" :loop="false" height="500px">
            <el-carousel-item v-for="item in loginApps" :key="item">
              <UIBlock path="page/login" :namespace="`app/${item.split('@')[0]}`" :version="item.split('@')[1]"></UIBlock>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
    };
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  computed: {
    loginImage() {
      return this.$store.getters.setting.loginImage;
    },
    defaultImage() {
      return 'this.src="' + require('../assets/login.png') + '"';
    },
    loginApps() {
      console.info(this.$store.getters.setting.loginApps)
      return this.$store.getters.setting.loginApps;
    }
  },
  methods: {
  },
};
</script>

项目中如何开发登录页面以及注意事项

平台主题里登录页面页面路径必须为page/login(即目录代码为page,页面标识为login)
平台主题里登录页宽度不能超过400px, 高度不能超过500px，自己业务自定义主题里可自行调整控制

方法管理中增加登录、登出方法实现,页面上通过this.$app.ctx.app('应用code').方法名进行调用

function({username, password, captchaKey, captchaCode, reload}){
  let app = this
  let ctx = this.ctx
  return new Promise((resolve, reject) => {
    const publicKey = '04054dd14e4c0f2fb80a221bfe20508cbd21c8b2241c294cefe30b5f487d14499228f8af128bc6cc08fc1ecf3d84f22dd72118e91bf3555e8a2edb13fe4594036d'
    let pwd = '04' + sm2.doEncrypt(password, publicKey, 0)
    console.info(app)
    const url = '/fbp/app/'+app.name+'/'+app.version+'/login/userpwd'
    app.axios.request({
      url: url ,
      method: 'POST',
      data: {
        username,
        password: pwd,
        captchaKey,
        captchaCode,
        encryptionType: 'bcrypt'
      }								 
    }, {systemErrorShow: false}).then((res) => {
      console.info(res)
      if (res.code === 0) {
        let { user } = res.data
        ctx.session.set("sessionId", res.data.sessionId)
        ctx.ws.send({type:'login', data: {token: res.data.sessionId}})
        user.auth = true
        // 返回业务导航信息 
        if (res.data.navs) {
        ctx.session.set("navs", res.data.navs)
        }
        console.info(user)
        ctx.store.commit('user', Object.assign({}, user))
        ctx.fireEvent("logged-in", user).then(resolve)
        resolve()
      } else {
      ctx.store.commit('error', res.msg)
      reject()
      }
      if (reload) {
      ctx.store.commit('reload')
      }
    }).catch((error) => {
      if (error.response) {
      ctx.store.commit('error', error.response.data.data)
      } else {
      ctx.store.commit('error', '网络连接异常')
      }
      reject(error)
    })
  })
}

如果涉及单点登录需方法中先进行全局路由拦截（路由拦截方法必须为access），再做后续操作

function({context, router, app}){
  return new Promise((resolve) => {
    var state = context.state
    let path = router.path
    state.path = path
    let geturl = window.location.href 
    if (!state.user.auth && geturl.indexOf('LoginName') != -1) {
      console.info('用户名单点登录', geturl)
      let getqyinfo = geturl.split('?')[1]
      let getqys = new URLSearchParams('?'+getqyinfo)
      let loginName = getqys.get('LoginName')
      app.login( { 'loginName': loginName }).then(() => {
        console.info(state.path)
        resolve(state.path)
      }).catch(() => {
        context.commit('error', '门户单点登录失败，请重新登录！')
        if (state.publics.has(path)) {
          app.ctx.fireEvent("logged-out").then(() => resolve())
        } else {
          context.commit("home", path)
          app.ctx.fireEvent("logged-out").then(() => resolve('/login'))
        }
      })
    } else {
      resolve('0')
    }
  })
}

项目的基本信息需维护：是否登录应用为“是”

搭建前端开发环境

搭建后端微服务开发环境

单机部署

搭建前端开发环境

搭建后端微服务开发环境

平台登录应用开发 ​

简介（mas5.14开始支持） ​

项目空间中新建登录项目，里面通过低代码配置方式开发登录页面，页面不再通过主题应用中源码进行开发，平台直接授权发布的登录应用即可加载显示。授权多个登录应用后主题的登录区域采用幻灯片的方式进行切换。 ​

主题中如何调整动态加载授权登录应用 ​

如下示例代码块，从缓存中获取loginApps，然后通过UIBlock进行加载显示 ​

项目中如何开发登录页面以及注意事项 ​

平台主题里登录页面页面路径必须为page/login(即目录代码为page,页面标识为login) ​

平台主题里登录页宽度不能超过400px, 高度不能超过500px，自己业务自定义主题里可自行调整控制 ​

方法管理中增加登录、登出方法实现,页面上通过this.$app.ctx.app('应用code').方法名进行调用 ​

如果涉及单点登录需方法中先进行全局路由拦截（路由拦截方法必须为access），再做后续操作 ​

项目的基本信息需维护：是否登录应用 为“是” ​

平台登录应用开发

简介（mas5.14开始支持）

项目空间中新建登录项目，里面通过低代码配置方式开发登录页面，页面不再通过主题应用中源码进行开发，平台直接授权发布的登录应用即可加载显示。授权多个登录应用后主题的登录区域采用幻灯片的方式进行切换。

主题中如何调整动态加载授权登录应用

如下示例代码块，从缓存中获取loginApps，然后通过UIBlock进行加载显示

项目中如何开发登录页面以及注意事项

平台主题里登录页面页面路径必须为page/login(即目录代码为page,页面标识为login)

平台主题里登录页宽度不能超过400px, 高度不能超过500px，自己业务自定义主题里可自行调整控制

方法管理中增加登录、登出方法实现,页面上通过this.$app.ctx.app('应用code').方法名进行调用

如果涉及单点登录需方法中先进行全局路由拦截（路由拦截方法必须为access），再做后续操作

项目的基本信息需维护：是否登录应用为“是”