[英]Changing Navbar links after logging out in reactjs
我正在使用 reactjs 和 redux 開發我的項目,我想在登錄或注銷時在導航欄中顯示不同的鏈接。 因此,當我單擊“登錄”時,一切正常並且一切正常,但是當我單擊“注銷”時,它不會自動更改導航欄,因此我必須刷新頁面。 有誰能夠幫助我? 這是我的 Navbar.js:
import React, { useEffect, useState} from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { Link,useHistory } from 'react-router-dom';
import { selectAccessToken } from '../features/authentications/authenticationsSlice';
import axios from 'axios';
import './Navbar.css';
export const Navbar = (props) => {
const [loggedIn , setLoggedIn] = useState(false)
let accessToken = useSelector(selectAccessToken);
const [token, setToken] = useState(accessToken)
const dispatch = useDispatch()
const [loggedOut, setLoggedOut] = useState([]);
const [errors, setErrors] = useState([]);
const LOGOUT_URL = 'http://127.0.0.1:8000/accounts_api/v1/dj-rest-auth/logout/';
const history = useHistory()
const removeTokens = async () => {
try {
const response = await axios.post(`${LOGOUT_URL}`, { headers: { "Authorization": `Bearer ${accessToken}` }})
const data = response.data;
setLoggedOut(data)
console.log("data: ", data)
}
catch (err) {
console.log('err', err)
setErrors(err)
}
}
const handleLogout = async () => {
await logout();
history.push("login/");
};
const logout = () => {
removeTokens()
localStorage.removeItem("access_token")
localStorage.removeItem("refresh_token")
console.log('localstrorage token after logout: ', localStorage.getItem("access_token"))
setLoggedIn(false);
accessToken = null
console.log('accesstoken after logout:', accessToken)
}
if (accessToken) {
return (
<nav>
<ul className="menu">
<li className="logo"> My logo </li>
<li className="item">
<Link to="/">
articles
</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
<li>
<Link to="/articles">Seconds</Link>
</li>
<li className="item">
<Link to="/management">
management
</Link>
</li>
<li className="item">
<Link to="/" onClick={handleLogout}>
Logout
</Link>
</li>
</ul>
</nav>
)
} else if (!accessToken) {
return (
<nav>
<ul className="menu">
<li className="logo"> My logo </li>
<li className="item">
<Link to="/">
articles
</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
<li>
<Link to="/articles">Seconds</Link>
</li>
<li className="item">
<Link
to="/login"
onClick={() => {
localStorage.setItem("access_token", true);
setLoggedIn(true);
}
}
>
Login
</Link>
</li>
</ul>
</nav>
)
}
}
您不能在注銷時將 accessToken 設置為 null 。 此 accessToken 是您在 redux 狀態下的訪問令牌的引用。 您的 redux 狀態仍然包含訪問令牌。
accessToken = null
你必須創建action
中投入的accessToken為空從終極版。 然后在注銷時調用該函數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.