Django urls + React Route

Question

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?

Answer 1

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 class="bg-gradient-primary">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-9 col-lg-12 col-xl-10">
                <div class="card shadow-lg o-hidden border-0 my-5">
                    <div class="card-body p-0">
                        <div class="row row-cols-1 justify-content-center">
                            <div class="col-lg-6">
                                <div class="p-5">
                                    <div class="text-center">
                                        
                                            {% if messages %}
                                                {% for message in messages %}
                                                    {% if message.tags == "success" %}
                                                    <div class="alert alert-success" role="alert">
                                                        {{message}}
                                                    </div>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                          
                                        <h4 class="text-dark mb-4">Welcome Back!</h4>
                                    </div>
                                    
                                    <form class="user" method="POST">
                                        {% csrf_token %}
                                        <div class="form-group"><input class="form-control form-control-user" type="text" id="exampleInputUsername" aria-describedby="usernameHelp" placeholder="Username" name="username"></div>
                                        <div class="form-group"><input class="form-control form-control-user" type="password" id="exampleInputPassword" placeholder="Password" name="password"></div><button class="btn btn-primary btn-block text-white btn-user" type="submit">Login</button>
                                        <hr>
                                        {% if messages %}
                                                {% for message in messages %}
                                                    {% if message.tags == "error" %}
                                                    <div class="alert alert-danger" role="alert">
                                                        {{message}}
                                                    </div>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                    </form>
                                    <div class="text-center"><a class="small" href="forgot-password">Recuperare parola</a></div>
                                    <div class="text-center"><a class="small" 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

Answer 2

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.