Проблема с лишним обновление переменных при конструкции компонента
Ситуация следующая. В своём приложении я использую роутер, и передаю ему информацию идентифицирован юзер или нет, аналогично с ролью админа. Данные хранятся в 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 }
}