He estado tratando de resolver este problema en el que puedo obtener el token de acceso solo después de iniciar sesión. me he quedado atascado en esto
El problema principal es que el Token ya lo está buscando en el almacenamiento local, pero aún no he iniciado sesión. ¿Cómo puedo hacer que el usuario inicie sesión primero antes de buscar en el almacenamiento local?
requestMethod.js
import axios from 'axios' const BASE_URL = 'http://localhost:5000/api' const TOKEN = JSON.parse(JSON.parse(localStorage.getItem('persist:root')).user) .currentUser.accessToken export const publicRequest = axios.create({ baseURL: BASE_URL, }) export const userRequest = axios.create({ baseURL: BASE_URL, headers: { token: `Bearer ${TOKEN}` }, })Iniciar sesión.jsx
import { useEffect } from "react" import { useState } from "react" import { useDispatch } from "react-redux" import { useHistory } from "react-router" import { login } from "../../redux/apiCalls" import { userRequest } from "../../requestMethod" const Login = () => { let history = useHistory() const [username, setUsername] = useState("") const [password, setPassword] = useState("") const dispatch = useDispatch() const handleClick = (e) =>{ e.preventDefault() login(dispatch,{username,password}) history.push('/home') } useEffect(() =>{ try { } catch (error) { } },[]) return ( <div style={{display: 'flex', alignItems:"center", justifyContent:"center", height: '100vh', flexDirection: "column"}}> <form action=""> <input style={{padding: 10, marginBottom:20}} value={username} type="text" placeholder="username" onChange={e => setUsername(e.target.value)} /> <input style={{padding: 10, marginBottom:20}} value={password} type="password" placeholder="password" onChange={e => setPassword(e.target.value)} /> <button style={{padding: 10, width: 100}} onClick={handleClick}>Login</button> </form> </div> ) } export default Loginapicalls.js
import { loginFailure, loginStart, loginSuccess } from './userRedux' export const login = async (dispatch, user) => { dispatch(loginStart()) try { const res = await publicRequest.post('/auth/login', user) const TOKEN = JSON.parse( JSON.parse(localStorage.getItem('persist:root')).user ).currentUser.accessToken dispatch(loginSuccess(res.data)) } catch (error) { dispatch(loginFailure()) }}
Primero debe buscar en localstorage. Simplemente verifique si el almacenamiento local contiene token o no. De lo contrario, envíe algún mensaje y redirija al usuario a la página de inicio de sesión.
Use encadenamiento opcional (?.) :
const TOKEN = JSON.parse(JSON.parse(localStorage.getItem('persist:root'))?.user) ?.currentUser?.accessToken;