刷新页面后，我退出了吗？为什么？答案

【问题标题】：Upon refresh of the page, I am logged out? Why?刷新页面后，我退出了吗？为什么？
【发布时间】：2021-10-24 19:54:20
【问题描述】：

我正在使用带有 ReactJS 的 Redux。我也在使用 devise-JWT 进行身份验证。刷新页面后，我的状态发生了变化，loggedIn 变为“false”。通过 fetch 发布数据时，我也会收到 400 Bad Request 错误。我可以正常登录并被重定向。

我的用户减速器：

import {
    SIGNUP_USER, 
    LOGIN_USER,
    LOGOUT_USER,
    STORE_TOKEN
} from '../actions/types'

const INITIAL_STATE = {
    loggedIn: false,
    currentUser: {}
} 

export default (state = INITIAL_STATE, action) => {
    switch(action.type){
        case SIGNUP_USER:
            return {
                ...state, 
                loggedIn: true,
                currentUser: action.payload
            }
        case LOGIN_USER:
            return {
                ...state, 
                loggedIn: true,
                currentUser: action.payload
            }
        case LOGOUT_USER:
            return { 
                ...state, 
                user: state.users.filter(user => user.id !== action.payload.id),
                loggedIn: false
            }

        case STORE_TOKEN:
            return {
                token: action.payload.token,
            }
        default:
            return state
    }
}

我的行动：

export function loginUser(data){
    return (dispatch) => {
        fetch("http://localhost:3000/login", {
            method: "post",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                user: {
                    ...data
                }
            })
        })
        .then(resp => {
            //debugger
            if (resp.ok) {
                resp.json().then(json => {
                    localStorage.setItem('token', json.token)
                    dispatch({ type: LOGIN_USER, payload: json })
                })
               
            } 
        })
    }
}

我的登录组件：

import React from 'react'
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import { loginUser } from '../actions/index'
import { connect } from 'react-redux'

class Login extends React.Component {
    state = {
      email: '',
      password: ''
    }


     handleSubmit = (e) =>{
        e.preventDefault()
        let credentials  = this.state
        this.props.loginUser(credentials)
        this.props.history.push('/bookmarks')
        
    }

    
    handleChange = (e) => {
      this.setState({[e.target.name]: e.target.value})
    }
    
   render() {
     const { email, password } = this.state
     return (
         <div className="login-form">
           <h1>Login</h1>
           <form onSubmit={this.handleSubmit}>
             <div>
               <TextField type="text" name="email" placeholder="Email" onChange={this.handleChange} value={email} />
             </div>
             <div>
               <TextField type="password" name="password" placeholder="Password" onChange={this.handleChange} value={password}/>
             </div><br></br>
             <Button type="submit" value="Login">Login</Button>
           </form>
         </div>
     )
   }

} 



const mapDispatch = (dispatch) => {
  return {
    loginUser: (credentials) => dispatch(loginUser(credentials))
    
  }
}


export default connect(null, mapDispatch)(Login)

我使用 devise-JWT 进行身份验证。

【问题讨论】：

标签： javascript reactjs redux react-redux jwt

【解决方案1】：

您已注销，因为您存储凭据的唯一位置是 redux 存储，它（本质上）是一个变量。

刷新页面时，会将商店重新初始化为默认状态。

您没有将凭据存储在它们可以持久存在的任何地方，例如本地存储或 cookie。

【讨论】：

谢谢昆汀！这是有道理的。