ow to auto update my header ?
Unanswered
Asian paper wasp posted this in #help-forum
Asian paper waspOP
Good morning
Today I am looking to create an authentication system. for the moment I only use localstorage to store a token.
My problem is that when I click on the disconnect button, I cannot update the little piece of code which changes:
- profile
- setting
- Sign out
has :
- to log in
- register
I tried several things, like just modifying via a variable stored in a useState, just modifying via isConnected directly in the code etc etc;
you would be of great help to me if you have an article on google that talks about it (doc or other)
I am also interested in a live discussion
Today I am looking to create an authentication system. for the moment I only use localstorage to store a token.
My problem is that when I click on the disconnect button, I cannot update the little piece of code which changes:
- profile
- setting
- Sign out
has :
- to log in
- register
I tried several things, like just modifying via a variable stored in a useState, just modifying via isConnected directly in the code etc etc;
you would be of great help to me if you have an article on google that talks about it (doc or other)
I am also interested in a live discussion
2 Replies
Asian paper waspOP
for the moment i have add this :
async function dropDown() {
if (connect) {
setDropDownProfil(
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
>
Profil
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
>
Paramètres
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
onClick={disconnect}
>
Se déconnecter
</a>
)}
</Menu.Item>
</Menu.Items>
)
} else {
setDropDownProfil(
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Item>
{({ active }) => (
<Link
href="/auth/login"
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-red-700')}
>
Se connecter
</Link>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<Link
href="/auth/register"
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-red-700')}
>
{`S'enregistrer`}
</Link>
)}
</Menu.Item>
</Menu.Items>
)
}
}
useEffect(() => {
getLogin()
setInterval(() => {
dropDown()
}, 1000);
}, [connect]);Asian paper waspOP
Anyone can help me ? I don't use app router ,I use page folder