MERN : 页面刷新后 Cookie 被删除答案

【问题标题】：MERN : Cookie deletes after page refreshMERN : 页面刷新后 Cookie 被删除
【发布时间】：2021-05-22 11:10:58
【问题描述】：

我面临的问题是登录后，cookie 出现在我的登录响应头中。

但是在我刷新/重新加载我的页面后，我被重定向回我的登录页面。

Error returned from my backend, which is stored in my redux state

这是由于我的后端发送了这个 400 错误响应。

authController.js(后置文件)

generateAccessToken: async (req, res) => {
        try {
            const rf_token = req.cookies.refreshtoken
            console.log(req.cookies)
            console.log("hi")
            if(!rf_token) return res.status(400).json({msg: "Please login now 11."})

            jwt.verify(rf_token, process.env.REFRESH_TOKEN_SECRET, async(err, result) => {
                if(err) return res.status(400).json({msg: "Please login now."})
                
                const user = await Users.findById(result.id).select("-password")
                .populate('followers following', 'avatar username fullname followers following')
                
                if(!user) return res.status(400).json({msg: "This does not exist."})
                
                const access_token = createAccessToken({id: result.id})
                
                res.json({
                    access_token,
                    user
                })
            })
            
        } catch (err) {
            return res.status(500).json({msg: err.message})
        }
    },

服务器.js



const app = express()

app.use(cookieParser())
app.use(cors())
app.use(express.json())


app.use('/api',authRouter)

即使在用户刷新页面或访问令牌过期后，也会从此处调度刷新令牌（）操作以登录用户

  useEffect(()=>{
    dispatch(refreshToken())
  },[dispatch])

 
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={auth.token? Home : Login}></Route>
        <Route exact path="/login" component={Login}></Route>
        <Route exact path="/register" component={Register}></Route>
      </Switch>
    </div>
  );
}

export default App;

authActions.js（从哪个请求发送到后端）



export const refreshToken = () => async (dispatch) => {
    const firstLogin = localStorage.getItem("firstLogin")
    if(firstLogin){
        dispatch({ type: TYPES.ALERT, payload: {loading: true} })

        try {
            const res = await postDataAPI('refresh_token')  // From here post req is being sent
            dispatch({ 
                type: TYPES.AUTH, 
                payload: {
                    token: res.data.access_token,
                    user: res.data.user
                } 
            })

            dispatch({ type: TYPES.ALERT, payload: {} })

        } catch (err) {
            dispatch({ 
                type: TYPES.ALERT, 
                payload: {
                    error: err.response.data.msg
                } 
            })
        }
    }

因此使用此函数发送 post 请求

export const postDataAPI = async (url, post, token) => {
    const res = await axios.post(`http://localhost:5000/api/${url}`, post, {
        headers: { Authorization: token},
        credentials: 'include',
  
    })
    return res;
}

authController.js（后端文件）

generateAccessToken: async (req, res) => {
        try {
            const rf_token = req.cookies.refreshtoken
            console.log(req.cookies)
            console.log("hi")
            if(!rf_token) return res.status(400).json({msg: "Please login now 11."})

            jwt.verify(rf_token, process.env.REFRESH_TOKEN_SECRET, async(err, result) => {
                if(err) return res.status(400).json({msg: "Please login now."})
                
                const user = await Users.findById(result.id).select("-password")
                .populate('followers following', 'avatar username fullname followers following')
                
                if(!user) return res.status(400).json({msg: "This does not exist."})
                
                const access_token = createAccessToken({id: result.id})
                
                res.json({
                    access_token,
                    user
                })
            })
            
        } catch (err) {
            return res.status(500).json({msg: err.message})
        }
    },

所以我想要解决的问题是，我不想在页面刷新时被重定向到我的登录页面，而是在我刷新的同一页面上。

【问题讨论】：

链接会随着时间的推移而断开。我想请您将您的图片添加到问题中，而不是链接它们。

标签： node.js reactjs express cookies cors

【解决方案1】：

带来了这些小改动，它奏效了 :)

在这件事上花了我一整天:(

app.use(cors({
    origin:"http://localhost:3000",
    credentials: true,
}))

export const postDataAPI = async (url, post, token) => {
    const res = await axios.post(`http://localhost:5000/api/${url}`, post, {
        headers: { Authorization: token},
        // credentials: 'include',
        'withCredentials':true
  
    })
    return res;
}

【讨论】：