i have the next djnago urls.py:
urlpatterns = [
path('register',views.registerPage, name="register"),
path('login',views.loginPage, name="login"),
path('logout',views.logoutUser, name="logout"),
path('',views.index),
path('createcompany',views.index),
# path('',views.index, name='home'),
path('test',views.index, name='test'),
path('admin',views.administrare_view,name='admin'),
]
and React route:
<Router>
<Drawer />
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/createcompany" element={<RegisterPage />}/>
<Route path="/test" element={<TestPage />}/>
<Route path="/admin" element={<AdminPage />}/>
</Routes>
</Router>When i press the logout button it chnage the link to /logout but dosen't logout the user. If i type manually the link or i refresh the page the user is gonna to logout. The menu dynamically created from React
const menuList=[
{
id:1,
text:"Profile",
icon:<PersonIcon sx={{ color: 'gray' }} />,
link:'/profile',
},
{
id:2,
text:'Logout',
icon:<LogoutIcon sx={{ color: 'gray' }} />,
link:'/logout',
},
]
<Tooltip title='Profile' placement='bottom' arrow enterDelay={500}>
<IconButton
onClick={userAvatar_Click}
size="small"
sx={{ ml: 2 }}
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<Avatar sx={{ width: 32, height: 32 }}>M</Avatar>
</IconButton>
</Tooltip>
<Menu
anchorEl={anchorEl}
id='account-menu'
open={open}
onClose={userAvatar_Close}
onClick={userAvatar_Close}
PaperProps={{
elevation: 0,
sx: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0,
},
},
}}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
{
menuList.map(item =>(
<MenuItem
onClick={()=> navigate(item.link)}
>
{item.icon}{item.text}
</MenuItem>
))
}
</Menu>Log out view:
def logoutUser(request):
logout(request)
return redirect('login')How can i point from react to that django view?
CodePudding user response：
In full-stack app like this, the links in the frontend is for client side only. For logging out the user, you need to request to the server through API, to the backend link using something like fetch api or axios. For eg:
axios.post/get(`link to logout in the backend`)
.then(...)
.catch(...);
You can bind this req to onclick event on logout button and after doing this, react app sends a get/post request to the backend and user gets logged out.
CodePudding user response：
I solved it partially with your answer, but now i didn't know how to restrict the user to not using the app after that and redirect him to the login page. I also have a view to display the login page:
@unauthenticated_user
def loginPage(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
user = authenticate(request,username=username, password=password)
if user is not None:
login(request,user)
return redirect('/')
else:
messages.error(request, 'Username or password is incorrect!')
context={}
return render(request,'accounts/login.html',context)and for rendering the app:
@login_required(login_url='login')
def index(request, *args, **kwargs):
return render(request,'accounts/blank.html')The login page is hardcoded and it looks like this:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Login - Brand</title>
<link rel="stylesheet" type="text/css" href="{% static 'assets/bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" type="text/css" href="{% static 'assets/fonts/fontawesome-all.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/fonts/font-awesome.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/fonts/fontawesome5-overrides.min.css' %}">
</head>
<body >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
{% if messages %}
{% for message in messages %}
{% if message.tags == "success" %}
<div role="alert">
{{message}}
</div>
{% endif %}
{% endfor %}
{% endif %}
<h4 >Welcome Back!</h4>
</div>
<form method="POST">
{% csrf_token %}
<div ><input type="text" id="exampleInputUsername" aria-describedby="usernameHelp" placeholder="Username" name="username"></div>
<div ><input type="password" id="exampleInputPassword" placeholder="Password" name="password"></div><button type="submit">Login</button>
<hr>
{% if messages %}
{% for message in messages %}
{% if message.tags == "error" %}
<div role="alert">
{{message}}
</div>
{% endif %}
{% endfor %}
{% endif %}
</form>
<div ><a href="forgot-password">Recuperare parola</a></div>
<div ><a href="{% url 'register' %}">Nu ai un cont? Creaza unul!</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{% static 'assets/js/jquery.min.js' %}"></script>
<script src="{% static 'assets/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'assets/js/chart.min.js' %}"></script>
<script src="{% static 'assets/js/bs-init.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="{% static 'assets/js/theme.js' %}"></script>
</body>
</html>After the logout i want to reach this page