react-native fetch使用cookie登录

效果,登录后获取到cookie,保存到本地,在需要登录接口请求的fetch中加入cookie
使用到的第三方有
import store from 'react-native-simple-store'
先看登录获取cookie

login(){
  let param = {
            mobile:this.phone,
            password:this.password
        }

        let isOk = false
        fetch(api.login, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(param),
        })
            .then((response) => {

                let map = response.headers.map
                this.setCookie(map)
                if (response.ok) {
                    isOk = true;
                } else {
                    isOk = false;
                }
                return response.json();
            })
            .then((json) => {
                if (isOk) {
                    console.log(json)

                    this.setState({
                        loading:false
                    })

                    if(json.status == '1'){
                        //登录成功
                        store.save('username',this.phone);

                    }else{
                        this.toast.show(json.msg)
                    }
                }
            })
            .catch((err) => {
                console.log(err)

            })

}
  setCookie(map){

        let cookie = map['set-cookie']

        if(cookie.includes('Path=/,')){
            let strArr = cookie.split('Path=/,')
            cookie = strArr.join('')
            console.log(cookie)
        }

        store.save('cookie',cookie)
        global.cookie = cookie
    }

获取到的cookie字符串如下:
csrf_token=IjEzNjJhNjI1M2I3MDIwZmRhZGFhY2NjM2I3NjY1ZGIyZmUxNzhkYWUi.XMSEFA.KPqQ5lRkCNnhAUs1lkpvmvISIDM; Path=/, session=e6762aee-bde9-4b4e-bfe9-92dff271e535.rCFDYahEGbvPdQeSu9w0aW_42q0; Expires=Sat, 11-May-2019 16:32:20 GMT; HttpOnly; Path=/
使用charles监听到的值


image.png

可以看出有俩个cookie需要保存,一个是session,另一个是csrf_token,但是我们设置cookie的时候只能设置一个,所以就合并为一个,方法是去掉中间的Path=/,得到的是
csrf_token=IjEzNjJhNjI1M2I3MDIwZmRhZGFhY2NjM2I3NjY1ZGIyZmUxNzhkYWUi.XMSEFA.KPqQ5lRkCNnhAUs1lkpvmvISIDM; session=e6762aee-bde9-4b4e-bfe9-92dff271e535.rCFDYahEGbvPdQeSu9w0aW_42q0; Expires=Sat, 11-May-2019 16:32:20 GMT; HttpOnly; Path=/
然后把这个值作为header中cookie的值,请求的时候带上即可
代码如下

RequestUtil.sendRequest = (url, method, params) => {

    let cookie = global.cookie

    if (method === 'GET') {
        if (params) {
            let paramsArray = [];
            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
            if (url.search(/\?/) === -1) {
                url += '?' + paramsArray.join('&')
            } else {
                url += '&' + paramsArray.join('&')
            }
        }
        let isOk;
        return new Promise((resolve, reject) => {

            fetch(url, {
                method: 'GET',
                headers: {
                    'Cookie': cookie,
                },
            })
                .then((response) => {
                    if (response.ok) {
                        isOk = true;
                    } else {
                        isOk = false;
                    }
                    return response.json()
                })
                .then((json) => {
                    if (isOk) {
                            resolve(json)
                      )
                    }else{
                             reject(json
                        }

                })
                .catch((error) => {
                    console.log(error)
                    reject({ status: -1 });
                })

        })


    } else {

        let isOk;
        let header = {
            'Cookie': cookie,
            'Content-Type': 'application/json',
        }

        return new Promise((resolve, reject) => {

            fetch(url, {
                method: method,
                headers: header,
                body: JSON.stringify(params),
            })
                .then((response) => {
                    if (response.ok) {
                        isOk = true;
                    } else {
                        isOk = false;
                    }
                    return response.json()
                })
                .then((json) => {
                    if (isOk) {
                        resolve(json)
                    }else{
                             reject(json)
                        }
                })
                .catch((error) => {
                    console.log(error)
                    reject({ status: -1 });
                })
        })
    }
}

你可能感兴趣的:(react-native fetch使用cookie登录)