刷新页面后，我退出了吗？为啥？

Posted 2023-03-10

【中文标题】刷新页面后，我退出了吗？为啥？

【英文标题】：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 进行身份验证。

【参考方案1】：

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

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

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

【讨论】：

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