带有盖茨比的本地护照注销无法完全注销

Question

我正在使用Passport-local进行身份验证，并在前端使用Gatsby

通常，代码可以正常工作。当我单击注销时，服务器返回200呼叫，并且收到响应“用户成功注销”。然后，我导航到登录页面。从那里，我无法访问我的私人信息发布页面。我的登录和发帖页面是客户端路由

当我单击主页（静态页面）时出现问题。从那里，当我单击发布链接时，我导航到发布页面，由于我已经注销，因此据说无法访问。我的fetchuser动作创建者可以运行，并且即使我已经从应用中退出，也能够获取用户详细信息

任何人都知道如何解决此问题？预先感谢

服务器

退出api

router.get("/signout", (req, res) => {
  req.logout();
  res.send("Sign Out Successfully");
});

我的api

router.get("/me", (req, res) => {
  res.send(req.user);
});

客户

应用

const App = () => {
  useEffect(() => {
    store.dispatch(fetchUser())
  }, [])

  return (
    <Layout>
      <Alert />
      <Router basepath="/app">
        <Signin path="/signin" />
        <Signup path="/signup" />
        <PrivateRoute path="/post" component={Post} />
        {/* <Default path="/" /> */}
      </Router>
    </Layout>
  )
}
export default App

fetchUser操作创建者

export const fetchUser = () => async dispatch => {
  try {
    const res = await axios.get("http://localhost:5000/api/users/me", {
      withCredentials: true,
    })
    dispatch({
      type: FETCH_USER,
      payload: res.data,
    })
  } catch (err) {
    console.log(err)
    dispatch({
      type: AUTH_ERROR,
    })
  }
}

退出动作创建者

  export const signOut = () => async dispatch => {
    const res = await axios.get("http://localhost:5000/api/users/signout")
    console.log(res)
    dispatch({
      type: SIGNOUT,
    })
    navigate("/app/signin")
}

Answer 1

尽管个人认为使用cookie或localStorage处理该方法很容易，但我认为您的方法是正确且有效的。

您的<PrivateRoute>组件应处理您的逻辑并根据用户状态（已记录或未记录）执行某些操作，例如：

import React from "react"
import { navigate } from "gatsby"
import { isLoggedIn } from "../services/auth"

const PrivateRoute = ({ component: Component, location, ...rest }) => {
  if (!isLoggedIn() && location.pathname !== `/app/login`) {
    navigate("/app/login") // or your desireed page
    return null
  }

  return <Component {...rest} />
}

export default PrivateRoute

您的auth服务应处理您的请求，在这种情况下，请使用localStorage，但可以将其替换为您的API请求：

export const isBrowser = () => typeof window !== "undefined"
export const getUser = () =>
  isBrowser() && window.localStorage.getItem("gatsbyUser")
    ? JSON.parse(window.localStorage.getItem("gatsbyUser"))
    : {}
const setUser = user =>
  window.localStorage.setItem("gatsbyUser", JSON.stringify(user))
export const handleLogin = ({ username, password }) => {
  if (username === `john` && password === `pass`) {
    return setUser({
      username: `john`,
      name: `Johnny`,
      email: `johnny@example.org`,
    })
  }
  return false
}
export const isLoggedIn = () => {
  const user = getUser()
  return !!user.username
}
export const logout = callback => {
  setUser({})
  callback()
}