用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

北京快3开奖:基于Taro框架的微信小程序JWT授权登录方案

北京快三最新开奖结果 www.6z8dk.cn Rolan 2019-3-7 00:42

小程序这两年可谓是风风火火,已经涉及到了行业的方方面面,作为一枚前端码农,为了紧跟时代的步伐,满足市场的需要,楼主也步入了小程序的坑中,一探究竟,从最初的原生开发,过渡到WePY的引入,又转到了mpvue的框 ...

北京快三最新开奖结果这两年可谓是风风火火,已经涉及到了行业的方方面面,作为一枚前端码农,为了紧跟时代的步伐,满足市场的需要,楼主也步入了小程序的坑中,一探究竟,从最初的原生开发,过渡到WePY的引入,又转到了mpvue的框架,最近又准备踩踩Taro的坑 了~

之所以从 mpvue 框架迁移到 Taro 框架,一是由于该框架是京东凹凸实验室开发维护的,目前来看比较活跃,更新迭代速度比较快,质量上有一定的保障;二是该框架支持多端统一,一劳永逸,为后面拓展H5等其他业务奠定基础~

因业务需求,我们采用 JWT 进行身份鉴权,所以才有了这篇 JWT 授权登录 解(cai)决(keng)方(zhi)案(nan),如果对 JWT 还不是很了解的小伙伴,请猛戳这里~

ok,不废话了,直接进入你们最想看到代码环节~

正文

关于 Taro 的安装的使用,我这里就不再赘述了,具体的步骤可以参考官网给出的教程,我们直接来看看授权登录这一块~

FBI WARNING : 本文相关的代码是跟楼主目前公司的有些业务场景有关,如有不同,请自行更改即可~

初始化 Taro 项目时,我们需要选择使用 Redux 模版,进行状态管理,然后默默等待依赖安装完成,通过 npm run dev:weapp 命令就可以启动我们的小程序服务了~

接下来跟着我的步骤走下去~

step1

首先,我们需要使用到 Redux 定义一些 app 相关的数据,方便我们后面的判断和使用~

Redux 三步走, reducer 、 constant 、 action 我这里就直接贴代码了~

  • constants 目录
//constants  app.js

//更改app登录状态
export const CHANGE_APP_ON_LAUNCH = 'change_app_on_launch';

//写入授权信息
export const INSERT_AUTHORIZE = 'insert_authorize';

复制代码
  • actions 目录
// actions app.js

import * as constants from '../constants/app'

//更改登录状态
export const changeAppOnLaunch = () => ({
    type : constants.CHANGE_APP_ON_LAUNCH
})

//写入请求token
export const insertToken = (authorize) => ({
    type : constants.INSERT_AUTHORIZE ,
    authorize
})

复制代码
  • recuders 目录
import * as constants from '../constants/app'

const INITIAL_STATE ={
	//请求接口域名地址
	baseURL : 'https://xx.xxx.xx/' ,
	//应用首次加载
	appOnLaunch : true ,
	//请求token
	authorize : ''
}

export default function app( state = INITIAL_STATE , action ){
    switch (action.type){
    	case constants.CHANGE_APP_ON_LAUNCH :
            return {
            	...state ,
            	appOnLaunch : false
            };
    	case constants.INSERT_AUTHORIZE :
            return {
            	...state ,
            	authorize : action.authorize
            };
    	default :
            return state;
    }
}
复制代码

最后不要忘记将其通过 combineReducers 方法合并到 Redux 里面去~

为了方便后面的使用,这里我在入口文件 app.js 中将 store 直接挂在到了 Taro 对象上,这样我们也就可以在后面通过 Taro.$store 这种方式直接获取进行操作处理,即:

//app.js
 
 componentDidMount() {
    //将redux状态挂载到 Taro 对象上,方便使用
    Taro.$store = store;
}
复制代码

step2

我们在 src 创建一个 utils 文件夹,用来存放我们一些公用的方法之类的文件~

由于微信小程序的限制,我们无法得知用户的登录状态是否过期,所以我们必须要通过 wx.checkSession 来接口检测当前用户登录态是否有效,做对应的逻辑处理~

因此,我们创建一个 auth.js 文件,用来微信登录,获取获取授权信息,其流程可以参考官方的这张时序图!

我们的 JWT 就是上面图所提到的自定义登录状态,它一般是长这样的

其中 exp 是令牌过期时间, iat 令牌签发时间, nbf 令牌生效时间, token 是用户状态,包含用户的身份信息,我们主要会用到 exp 和 token 两个字段,用来判断令牌是否过期和发送请求携带用户身份~

因此,我的做法是,在用户进入小程序的时候通过 Taro.checkSession() ,检查 session_key是否过期,如果过期需要通过 Taro.login() 重新登录进行授权,获取 JWT 授权信息,否则就判断用户的令牌是否过期,如果过期就要重新刷新令牌,重新获取,其代码如下~

// auth.js

import Taro from '@tarojs/taro'
import { insertToken , changeAppOnLaunch } from '../actions/app'
//获取数据
export default class Auth {
//app授权
static appCheckAuth(){
    return new Promise(function (resolve) {
    	const state = Taro.$store.getState();
    	//如果有授权信息
    	if( Auth.checkAuth() && !state.app.appOnLaunch ){
            //直接返回
            resolve(true);
    	}else{
            //判断session_key是否过期
            Taro.checkSession().then(async ()=>{
                //未过期检查token是否有效
                if( !Auth.checkAuth() ){
                    //判断是否 token 请求成功
                    let flag = await getAuthToken();
                    if( flag ) {
                        //更新app状态
                        Taro.$store.dispatch(changeAppOnLaunch());
                        resolve(true);
                    }else{
                      //提示
                        Taro.showToast({
                        title : '获取授权信息失败' ,
                        icon : 'none' ,
                        mask : true
                        })
                    }
                }else{
                    //更新app状态
                    Taro.$store.dispatch(changeAppOnLaunch());
                    //token 没有过期,直接返回
                    resolve(true);
                }
            }).catch(async (err)=> {
            	console.log(err);
            	let flag = await getAuthToken();
            	//判断是否 token 请求成功
            	if( flag ) {
                    //更新app状态
                    Taro.$store.dispatch(changeAppOnLaunch());
                    resolve(true);
            	}else{
                    //提示
                    Taro.showToast({
                    	title : '获取授权信息失败' ,
                    	icon : 'none' ,
                    	mask : true
                    })
            	}
            })
        }
    })
}
    
    // 检查令牌是否有效 true--> 有效  false--> 无效
    static checkAuth(){
        const state = Taro.$store.getState();
        //从缓存读取授权信息
        let authorize = state.authorize || Taro.getStorageSync('authorize') || {},
            expiryTime = 0,
            nowTime = ~~(Date.now() / 1000);
    
    	if (authorize.exp) {
            expiryTime = authorize.exp;
    	}
    
    	return expiryTime - nowTime > 300;
    }

    //获取token
    static getToken(){
    	const state = Taro.$store.getState();
    	let authorize = state.authorize || Taro.getStorageSync('authorize');
    	return authorize.token;
    }
}

//授权用户 token
async function getAuthToken(){
	const state = Taro.$store.getState();
	//login
	let res = await Taro.login();
	//获取token
	let response = await Taro.request({
            url : `${state.app.baseURL}api/xxx/xxx` ,
            data : {
            	code : res.code 
            } ,
            method : 'POST'
	})
    //判断是否成功
    if( response.data.data && response.data.data.authorize ){
        //写入token
        let authorize = response.data.data.authorize;
        saveAuthToken(authorize);
        return true;
    }else{
        console.log('获取token失败');
        return false;
    }
}

//写入信息
function saveAuthToken (authorize) {
    //写入状态管理
    Taro.$store.dispatch(insertToken(authorize));
    //写入缓存
    Taro.setStorageSync('authorize',authorize)
}
复制代码

上面总共定义不少方法,我都有注释,相信大家也都能看懂,其主要思想就是,如果用户首次进入小程序,通过 login 进行登录,并将令牌存入本地,后面通过 getToken 方法进行获取请求的令牌,以后用户在进入小程序的时候,就进行授权信息和登录状态检测,如果登录过期或者令牌过期则通过 getAuthToken 方法进行请求,获取最新的身份令牌!

上面之所以要触发一次 changeAppOnLaunch 是因为用户每次进入需要进行一次 checkSeesion检测,如果用户本次 session_key 未过期,一般来说本次小程序生命周期内就就不需要在进行 checkSession 检测了,因此我们用一个状态来标识用户是否是重新进入小程序~

step3

假定我们的页面的初始化请求都写在 componentDidMount 生命周期内,那么现在我们要做的就是要在页面接口请求之前去判断是否已经获取到 token ,如果有 token 则进行正常的接口请求,否则就通过上面的登录获取 token ,不然就会导致接口未携带令牌而发生错误~

那么问题来了,我们如何阻塞 componentDidMount 而保证每次接口请求之前都已经拿到了 token 呢,这里我的做法就是对 Component 进行二次封装,采用的是 ES7 提供的 装饰器 ,关于装饰器的使用,可以瞄一眼这篇文章~

通过装饰器,我们可以将 Component 进行二次封装,可以根据业务情况将授权、分享等全部进行归一化处理,这里我们创建一个 pageInit.js ,来实现这个功能~

//pageInit.js

import Taro from '@tarojs/taro'
import auth from '../utils/auth'
function pageInit() {
    return function Component(Component) {
        return class extends Component {

        constructor (props){
            super(props);
        }
        
        //onLoad
        componentWillMount(){
            //初始分享信息
            initShareMenu(this.state);
        }
        
        //阻塞 didMount , 鉴权
        async componentDidMount() {
            let result = await auth.appCheckAuth();
            //授权成功
            if( result ){
            	//调用父组件的函数
            	super.componentDidMount && super.componentDidMount();
            }else{
            	//授权失败
            	Taro.showToast({
                    title : '授权失败' ,
                    icon : 'none' ,
                    mask : true
            	})
            }
        }
        
        //重写分享
        onShareAppMessage(){
            let shareOptions = super.onShareAppMessage();
            //如果当前页面配置分享使用配置的
            if( shareOptions ) return shareOptions;
            //默认分享
            return {
            	title : '默认分享内容'
            }
        }

        //重新下拉刷新
        onPullDownRefresh(){
            if(super.onPullDownRefresh){
            	super.onPullDownRefresh();
            	setTimeout(() => {
            		Taro.stopPullDownRefresh();
            	}, 1500)
            }
        }
    }
};
}

/**
 * 初始化分享信息
 */
function initShareMenu (state) {
    // 初始化页面分享信息
    if ( state && state.canShare ) {
    	Taro.showShareMenu({
            withShareTicket: false
    	})
    } else {
    	Taro.hideShareMenu();
    }
}

export default pageInit;

复制代码

核心思想是,通过 async 和 await 阻塞,让其先执行自身的 componentDidMount 方法,拿到授权信息后,在调用父类的 componentDidMount 方法,这样就可以保证授权信息获取到再进行接口请求了~

我们要做的就是在页面内通过 @pageInit() 进行装饰即可~

这里我做了个测试,在清空全部授权信息后,在页面进行一次接口请求,可以看到先执行的是 lite 获取用户令牌,然后进行页面的接口请求,保证了执行顺序不会错乱~

小结

ok,到此为止,我们基本上已经算是完成了整套体系,接下来就是在接口请求中加上 token 就好了,这里我就补不贴代码了~ 完成的代码可去仓库自行 查看 ~

Taro 对于我来说,也算是属于初探,这篇文章也是希望能给跟我一样萌新的小伙伴一个抛砖引玉的作用,如果有哪里写的不对的地方,还请批评斧正~

分享至 : QQ空间
收藏
原作者: Chris威 来自: 掘金
  • 法制日报:别让世界杯激情冲淡守法意识 2019-03-20
  • 这些难免只有马克思主义真理才能自救,其余的都瞎扯淡,至于他们需要从哪里讨说法,也在马克思主义真理里面了 2019-03-20
  • 董卿海霞李思思康辉撒贝宁 央视名嘴童年照谁更萌 2019-03-19
  • 800万尾鱼苗放流天津蓟州于桥水库 2019-03-18
  • 高考生免费游景区是一种人文关怀 2019-03-18
  • 中华人民共和国英雄烈士保护法 2019-03-17
  • 这艘中国船刚干了件勾起美国加拿大敏感矛盾的事,但国内却没啥人知道… 2019-03-16
  • 马德里18家医院出现技术故障 预约资料丢失 2019-03-15
  • 咱主张不由市场发挥全部作用,是因为市场受需求引导,而需求又分正义需求和邪恶需求。 2019-03-14
  • 笑博士没有经历计划经济时代!其对计划经济的批评,是从市场派抄袭来的。实践证明,社会主义与计划经济是兼容的。正是由于中国中途放弃计划经济,盲目迷信市场经济,使得中 2019-03-13
  • 叙利亚礼俗(礼仪漫谈) 2019-03-13
  • 2018网络中国节·端午 2019-03-12
  • 世界杯VAR再度立功 助瑞典1 2019-03-12
  • 没考上?没关系。其它学校也能培养建设国家的人才,清华只是名气大点。 2019-03-11
  • 您访问的页面找不回来了 2019-03-11
  • 384| 59| 368| 255| 731| 11| 306| 300| 71| 109|