Проблема с лишним обновление переменных при конструкции компонента

Ситуация следующая. В своём приложении я использую роутер, и передаю ему информацию идентифицирован юзер или нет, аналогично с ролью админа. Данные хранятся в auth context, заносятся туда auth hook, и используются в App.js. Весь код ниже. Проблема в том, что при перезагрузке страницы я перенаправляюсь с любой вкладки на домашнюю страницу. Это происходит из-за моментального изменения в App.js при конструкции компонента App, изменяются(при перезагрузке страницы) переменные в функции useRoutes(isAuthenticated, admin) на false и соответственно true(true - после идентификации). Я относительно новичёк в React, и не совсем понимаю как решить этот вопрос. Всё, чего я хочу достичь, это сделать так, что бы переменные не изменяли свои значения в App при простом обновлении страницы.

App.js

function App() {
  const { token, login, logout, admin } = useAuth()
  const isAuthenticated = !!token
  const routes = useRoutes(isAuthenticated, admin)  
  return (
    <AuthContext.Provider value={{
      token, login, logout, isAuthenticated, admin
    }}> 
      <Router>  
        <div className="app-container">
          {routes}
        </div>
      </Router>
    </AuthContext.Provider>
  );
}

AuthContext.js

function noop() { }

export const AuthContext = createContext({
  token: null,
  login: noop,
  logout: noop,
  isAuthenticated: false,
  admin: false,
})

Auth.hook.js

const storageName = 'userData'

export const useAuth = () => {
  const [token, setToken] = useState(null)
  const [admin, setAdmin] = useState(false)
  const login = useCallback((jwtToken, isAdmin) => {
    setToken(jwtToken)
    setAdmin(isAdmin)
    localStorage.setItem(storageName, JSON.stringify({
      token: jwtToken,
      isAdmin: isAdmin,
    }))
  }, [])


  const logout = useCallback(() => {
    setToken(null)
    setAdmin(false)
    localStorage.removeItem(storageName)
  }, [])

  useEffect(() => {
    const data = JSON.parse(localStorage.getItem(storageName))

    if (data && data.token) {
      login(data.token, data.isAdmin) // <-- There some problem
    }
  }, [login])


  return { login, logout, token, admin }
} 

Ответы (0 шт):