Loading...
墨滴

林勇明

2021/06/30  阅读:38  主题:凝夜紫

前端登录未命名文章

登录

目前支持h5登录,抖音登录,企业微信登录,微信登录,可以扩展到字节系列平台登录

TIP:禁止对src/utils/login的任意修改。

方法参数

/**

  • @description:
  • @param {*} platform:自定义platform,默认为9,如果是抖音环境,将自动为32,不支持修改
  • @param {*} :cancel:h5是否可以取消登录 默认false:不可以
  • @param {*} :popupRef:'', 自定义登录弹窗,浏览器内 传入组件ref
  • @param {*} :bindPhone:'', 绑定手机号,微信端,默认false
  • @param {*} :selfDefinedPopup:'',是否自定义登录弹窗,浏览器内,需要使用插槽模式 (未完成)
  • @return {*} userinfo 用户信息 */

文件目录

├── login
│   ├── index.js       // 入口文件 主要流程
│   ├── const.js       // 常用参数 platform、appid,以及ua判断
│   ├── dySdk.js       // 未完成
│   ├── handleLogin.js // 处理不同端的登录类
│   ├── initData.js    // 用户信息处理类 
│   ├── server.js      // 接口

使用

  • 基础使用

import login from '@/utils/login


login(params).then(res=>{
  if(res){
      // 如果页面强制登录,请将登录后的逻辑写在这里。login为promise,res返回用户信息
  }
})

const res = await login(params)
 if(res){
      // 如果页面强制登录,请将登录后的逻辑写在这里。login为promise,res返回用户信息
  }
  • 修改platform

  login({platform:xxx}).then(res=>{
  if(res){
      // 如果页面强制登录,请将登录后的逻辑写在这里。login为promise,res返回用户信息
  }
})

// 或者在页面url上携带platform参数
  • url携带accessToken

这种情况下,会清楚本地的用户信息,并且使用url携带的token进线登录

  • 绑定手机号

这种模式会自动校验用户信息是否绑定了手机号,如果没有绑定,会自动调用你传入的弹窗组件 第一,使用默认的绑定手机号弹窗组件

// 你的登录页面

import bindPhone from '@/utils/login/components/bindPhone.vue

// visible控制弹窗显示隐藏,登录页面中仅需要定义该字段,无需进线额外的操作。login方法默认会自动操作弹窗显示和隐藏
<bindPhone :visible.sync='
visible' ref='bindPhoneRef'></bindPhone>

login({bindPhone:true,popupRef:this.$refs.bindPhoneRef}).then(res=>{
  if(res){
      // 直到你绑定了手机号之后,才会进入 .then
  }
})

第二:使用自定义的弹窗组件。此处需要注意的地方主要是传入 src/utils/login/components/phoneLoginMixin.js

tip:切记不要在你的登录页面中引入 phoneLoginMixin.js

  1.定义 弹窗组件
  2.在弹窗组件中引入 src/utils/login/components/phoneLoginMixin.js
  3.绑定phoneLoginMixin中指定的事件

修改记录

  • 2021-0513 : 新增 version校验逻辑
  • 2021-0514 @/utils/login: 新增 如果url上携带accessToken,会强行清除(access-token,- bx-wx-info,rh-wx-info),用携带的accessToken进行登录,并重新设置access-token,bx-wx-info,rh-wx-info
  • 2021-0525 @/utils/login: 新增 微信环境必须授权登录弹窗。
  • 2021-0601 @/utils/login: 新增 微信环境下 绑定手机号逻辑,目前为自定义弹窗
  • 2021-0601 @/utils/login: 新增 浏览器h5环境下,自定义弹窗登录 传入popupRef
  • 2021-0730 @/utils/login: 新增 默认手机号码绑定弹窗 src/utils/login/components/bindPhone.vue

林勇明

2021/06/30  阅读:38  主题:凝夜紫

作者介绍

林勇明