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
})