ReactJS: Как правильно использовать реагирующий файл cookie в действии?

Question

Я читал статьи о том, что сохранение токена в localstorage опасно для атаки XSS. Поэтому я решил хранить свои токены в куки. И я использую реагирующее печенье . Я видел примеры, и я пытаюсь это сделать, но мой auth.js состоит из const и не является классом, поэтому я не знаю, как использовать withCookies() с ним, это мой auth.js, где я хотите сохранить токен для печенья:

import {
  LOGIN,
  LOGIN_SUCCESS,
  LOGIN_FAILED,

  GET_USER_DATA,
  GET_USER_DATA_SUCCESS,
  GET_USER_DATA_FAILED,

  LOGOUT,
  LOGOUT_SUCCESS,
  LOGOUT_FAILED,
} from './types'

import axios from 'axios'
var api = require ('./../api.js');


export const login = (email, pass) => {
    return (dispatch) => {
        dispatch({
            type: LOGIN
        })
        var url = api.logInApi
        axios.post(url, {
              email: email,
              password: pass
            })
            .then(res => {
                dispatch({
                    type: LOGIN_SUCCESS,
                    payload: res.data
                })
                localStorage.setItem('token', res.data.token)
                dispatch(getUserData())
            })
            .catch(err => dispatch({
                type: LOGIN_FAILED,
                payload: err
            }))
    }
}



export const getUserData = () => {
    return (dispatch) => {
        dispatch({
            type: GET_USER_DATA
        })
        var url = api.getUserDataApi
        axios.post(url, {}, {headers: {
                "Authorization": `Bearer ${localStorage.getItem("token")}` 
              }})
            .then(res => {
                dispatch({
                    type: GET_USER_DATA_SUCCESS,
                    payload: res.data
                })
            })
            .catch(err => dispatch({
                type: GET_USER_DATA_FAILED,
                payload: err
            }))
    }
}


export const logout = () => {
    return (dispatch) => {
        dispatch({
            type: LOGOUT
        })
        var url = api.logoutApi
        axios.post(url, {}, {headers: {
                "Authorization": `Bearer ${localStorage.getItem("token")}` 
              }})
            .then(res => {
                window.location.replace("")
                dispatch({
                    type: LOGOUT_SUCCESS,
                    payload: res.data
                })
            })
            .catch(err => dispatch({
                type: LOGOUT_FAILED,
                payload: err
            }))
    }
}

Теперь я попытался сделать это, и, конечно, это не работает:

import {
  LOGIN,
  LOGIN_SUCCESS,
  LOGIN_FAILED,

  GET_USER_DATA,
  GET_USER_DATA_SUCCESS,
  GET_USER_DATA_FAILED,

  LOGOUT,
  LOGOUT_SUCCESS,
  LOGOUT_FAILED,
} from './types'

import axios from 'axios'
import { withCookies, Cookies } from 'react-cookie'; <<added this
var api = require ('./../api.js');

const login  = (email, pass) => {
    return (dispatch) => {
        dispatch({
            type: LOGIN
        })
        const { cookies } = props; <<added this
        var url = api.logInApi
        axios.post(url, {
              email: email,
              password: pass
            })
            .then(res => {
                dispatch({
                    type: LOGIN_SUCCESS,
                    payload: res.data
                })
                cookies.set('token', res.data.token, { path: '/' }); <<added this
                dispatch(getUserData())
            })
            .catch(err => dispatch({
                type: LOGIN_FAILED,
                payload: err
            }))
    }
}
export default withCookies(login) <<added this(wrong)



const getUserData = () => {
    return (dispatch) => {
        dispatch({
            type: GET_USER_DATA
        })
        const { cookies } = props; <<added this
        var token = cookies.get('token'); <<added this
        var url = api.getUserDataApi
        axios.post(url, {}, {headers: {
                "Authorization": `Bearer ${token}` <<added this(this is where I wanna get the cookie)
              }})
            .then(res => {
                dispatch({
                    type: GET_USER_DATA_SUCCESS,
                    payload: res.data
                })
            })
            .catch(err => dispatch({
                type: GET_USER_DATA_FAILED,
                payload: err
            }))
    }
}
export default withCookies(getUserData) <<added this(wrong)


const logout = () => {
    return (dispatch) => {
        dispatch({
            type: LOGOUT
        })
        const { cookies } = props;
        var token = cookies.get('token');
        var url = api.logoutApi
        axios.post(url, {}, {headers: {
            "Authorization": `Bearer ${token}` <<added this
              }})
            .then(res => {
                window.location.replace("")
                dispatch({
                    type: LOGOUT_SUCCESS,
                    payload: res.data
                })
            })
            .catch(err => dispatch({
                type: LOGOUT_FAILED,
                payload: err
            }))
    }
}
export default withCookies(logout) <<added this(wrong)

это неверно, потому что должен быть только один экспорт по умолчанию. Но я не знаю, как реализовать withCookies для const, и есть также те, которые включены в пример, и я не знаю, нужны ли они мне или куда их поместить:

  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  constructor(props) {
    super(props);

    const { cookies } = props;
    this.state = {
      name: cookies.get('name') || 'Ben'
    };
  }

а также еще один вопрос: я могу получить доступ к своим файлам cookie в любом месте моего проекта, верно? так же, как localstorage доступен для моего проекта?

Я надеюсь, что кто-то может мне помочь, и я новичок в этом. Я никогда раньше не использовал куки, поэтому спасибо за ваше внимание.

Answer 1

Лично я бы предпочел использовать js-cookie для записи / чтения файлов cookie.

У него очень простой API:

Cookie.set('cookie_name', 'value') // will set "cookie_name" to "value"
Cookie.get('cookie_name') // will return "value"

Что означает:

const login  = (email, pass, cookie) => {
    return (dispatch) => {
        dispatch({
            type: LOGIN
        })
        var url = api.logInApi
        axios.post(url, {
              email: email,
              password: pass
            })
            .then(res => {
                dispatch({
                    type: LOGIN_SUCCESS,
                    payload: res.data
                })
                cookies.set('token', res.data.token);
                dispatch(getUserData())
            })
            .catch(err => dispatch({
                type: LOGIN_FAILED,
                payload: err
            }))
    }
}

Переход к функции login Cookie js-cookie в третьем аргументе.

Теперь вы все равно можете использовать тот же пакет react-cookie для чтения значений cookie (Iсчитаю, что не должно быть никаких конфликтов).Или вы можете заменить его на js-cookie.Однако для этого вам придется передать объект Cookie в реквизит.Я, вероятно, сделал бы это, используя mapStateToProps, если вы используете Redux или просто пропустив его через JSX