snail-login

蜗牛登录通用组件

Usage no npm install needed!

<script type="module">
  import snailLogin from 'https://cdn.skypack.dev/snail-login';
</script>

README

蜗牛登录组件

蜗牛登录组件,包括客户端内及客户端外的情况

用法

安装

npm i snail-login --save

或者

yarn add snail-login

使用

获取全局唯一实例

主要用于多组件之间共享如同一个Login示例,防止被多次实例化,节省资源(比如多个组件中调用isLogined异步获取登录状态时,app中不会多次发送不必要的请求去重复获取)

import {getLoginInstance} from 'snail-login'
const login = getLoginInstance(); //通过该方法获取的Login的实例全局唯一

常规用法

  • 使用时需先实例化!!
  • isLogined 判断当前页的登录状态,异步返回,返回值为Promise,详细用法见下面示例
/**
* 获取页面的登陆状态,异步返回!!
* @param {Boolean} useH5Logic 是否在客户端环境下也使用H5的逻辑判断是否登录,只用户开发阶段,请勿用于生产环境(将会导致客户端登陆状态判断不准确)!!
* @returns {Promise} 返回一个Promise,如果当前用户已登录,会resolve用户的信息,否则会resolve null
*/
function isLogined(){...}
  • login 主动登陆,客户端内会自动唤起登陆模块,客户端外则会跳转登陆页,参数及用法见以下示例
/**
* 登录方法,客户端内会唤起登陆模块,客户端外会跳转到登陆页
* @param {Object} options - 登录方法的参数
* @param {string} options.type - 登陆方式,'mail/phone',默认为mail即邮件登陆
* @param {string} options.h5Type - h5端内登陆方式,'mail/phone/weibo/qq/wechat',直接使用制定的方式登陆,默认为空,即先进入登陆方式选择页
* @param {function} options.callback - 客户端内登陆后的回调函数,参数为userInfo,如果用户取消登陆,userInfo为null,正常登录,userInfo为用户的信息
* @param {string} options.targetUrl - 客户端外的登录成功的跳转地址,无需转义
*/
function login(){...}

示例

import {getLoginInstance} from 'snail-login'
const login = getLoginInstance(); //通过该方法获取的Login的实例全局唯一
import Login from 'snail-login'
const login = new Login();
//isLogined方法,判断当前页面登录状态,异步返回,客户端内已登录会自动进行同步登录
//已登录状态会直接返回用户的信息,未登录状态只返回null
async function checkLogin(){
  try {
    const userInfo = await login.isLogined();
    if(userInfo){
      this.isLogined = true;
      this.userInfo = userInfo;
    }else{
      this.isLogined = false;
    }
  } catch (error) {
    console.log('check login failed', error);
  }
},

//login方法,客户端内唤起登录模块,客户端外跳转登陆页
//可选参数:callback,客户端内登录成功后的回调方法,回调方法内的参数为userInfo,
//如果用户成功登陆,userInfo为用户信息,如果用户取消登录,userInfo为null
//可选参数: type, 'mail/phone'唤起默认登录方式还是手机号登陆方式,不传代表默认为mail
//可选参数: h5Type, 'mail/phone/weibo/qq/wechat',直接使用制定的方式登陆,默认为空,即先进入登陆方式选择页
//可选参数:targetUrl,客户端外登陆成功后的跳转链接
login.login({
  type: 'phone',
  callback: userInfo => {
    if(userInfo){
      this.isLogined = true;
      this.userData = userInfo;
      this.getInfo();
    }
  },
  targetUrl: location.href
})