Redirect page by passing header Authorization

Question

I have a login application where the user type the username and password, then I make a POST request with ajax according to the code below:

<script >
    $(document).on('click',".entrar",function(e){
        e.preventDefault();
        let name = document.getElementById('user').value;
        let pass = document.getElementById('pass').value;
        if(name.length && pass.length){
            $.ajax({
                url:"http://localhost:8081/auth/login",
                method:"POST",
                data:{
                    name:name,
                    pass:pass
                },
                async:true,
                success:function(data){
                    if(/Senha|Usuário/i.test(data)){
                        document.getElementById("alerta").style.display = "block";
                        $("#erro").html(data);
                    }else{

                    }
                },


            });
        }

    });


</script>

The return of the ajax, in the function of Success, is a message informing if the user is incorrect or the password , that if one of the information is incorrect, if everything is ok, the return is an authorization token. What I want to do, is if I am receiving the token ,I need to redirect to http://localhost:8081/Projects however, need to pass an authorization header for this link containing the token would be something like 'Authorization': 'Bearer ' + token;

How do I get the token ,redirect the page by passing this token in the header, the redirect part would be inside Else

Answer 1

The server will send the Authorization header in your reply, that is, after executing the request, you can get the header as follows within the "Success:

success: function(data, textStatus, request){
         const token = request.getResponseHeader('Authorization');
         if(token){ 
            localStorage.setItem('token', token);
            window.location = 'http://localhost:8081/projects';
         }
},

Instead of sending the token in the header, you can store it in a Torage locale, and check after the redirect if it exists and is valid.

Answer 2

I assume you mean window.Location redirection = 'http://localhost:8081/Projects', however, as far as I know, it is impossible to redirect to a page with custom headers defined, regardless of the language or structure used. In other words, there is no way to trigger an HTTP redirect and have the client add a custom header. So much so that the window.Location redirection would be used on the Project page, in your case, when the Authorization Header was invalid, it would redirect to the login page again without any custom header.

The only way for a website to instruct a browser to issue an HTTP request with a custom header is to use ajax, so when the page is redirected, when loading, make an ajax call, sending the Authorization header that was obtained in the login page and that was saved in the browser, and in the server-side, validate this header and send the data that will be displayed in the page, if invalid, by the client-side use window.Location to redirect back to the login page. And it needs CORS implemented on the target server to allow such ajax requests.