I already managed to set up a working user authentication with Flask JWT.

With a button click I'm sending user and password to my login endpoint and with correct credentials I will get back an access_token and store that in my browser storage

$("#buttonid").click(function () {
            var person = {
                username: $("#userid").val(),
                password: $("#passwordid").val(),
            };

            $.ajax({
                url: "/login",
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(person),

                success: function (data) {
                    localStorage.setItem("token", data.access_token);       
                },
            });
    

Together with that button click I would like to access my jwt_restricted protected.html

@app.route("/protected", methods=["GET", "POST"])
@jwt_required()
def protected():
       return render_template("protected.html")

Cause of jwt_required I'm transfering the saved token in my header, that works within ajax, but doesnt load my protected.html.

$.ajax({
          url: "/protected",
          type: "get",
          headers: { Authorization: "Bearer " + localStorage.getItem("token")},
          success: function (response) 
              {console.log("working");},
      });

Is it possible to send my token in a get request from within a page load something like

window.location.href = "protected" (headers: { Authorization: "Bearer " + localStorage.getItem("token"));

Or is there any other way?

Thx