Блог

Главная - Вопросы по программированию - Passport-Local с выходом Gatsby не завершается полностью

Passport-Local с выходом Gatsby не завершается полностью

#passport.js #gatsby

#passport.js #gatsby

Вопрос:

я использую Passport-local для аутентификации и Gatsby на интерфейсе

Как правило, код работает нормально. Когда я нажимаю на выход из системы, сервер возвращает вызов 200, и я получаю ответ «Пользователь успешно вышел из системы». Затем я перешел на страницу входа. Оттуда я не могу получить доступ к своей странице публикации, которая является частным маршрутом. Моя страница входа и публикации — это маршруты на стороне клиента

Проблема возникает, когда я нажимаю на домашнюю страницу (которая является статической страницей). Оттуда, когда я нажимаю на ссылку post, я перехожу на страницу post, которая предположительно недоступна теперь, когда я вышел из системы. Мой создатель действий 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")
}

Комментарии:

1. Почему вы не используете файлы cookie для контроля состояния пользователя и избежания этой проблемы?

2. Я больше знаком с токеном и играю с файлами cookie. Поскольку моя домашняя страница — SSR, в то время как мои страницы входа и публикации отображаются на стороне клиента, я не уверен, что это проблема

3. Я думаю, что оптимально обрабатывать авторизацию пользователя с помощью файлов cookie (плюс токены) или localStorage , мой обходной путь будет сосредоточен на этом. Если вы решили воспользоваться этим обходным путем, я могу дать ответ.

4. Конечно. Если у вас есть справочные коды для этого, я ценю и посмотрю. Я планирую создать его с использованием токена для сравнения различных механизмов аутентификации

Ответ №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() amp;amp; 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() amp;amp; 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` amp;amp; 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()
}