I have a simple log in form which POSTs to /token, retrieves the token and stores it in a local javascript variable.

On the success of this $.ajax() POST I want to redirect to /About, but I need to pass the token in the header of the redirect, because some of my menu items are available only if the user is authorized, IE:

    @if (User.IsInRole("external"))
    {
        <li>
            @Html.ActionLink("About", "About", "Home")
        </li>
    }

...etc

I have a simple log in form which handles Username and password, along with JS which calls the /token endpoint and returns the auth token, intention is then to redirect to /home:

<form id="userLogin">
    <label for="txtUserName">UserName: </label>
    <input type="text" id="UserName" name="UserName" />
    <label for="txtPassword">Password: </label>
    <input type="password" id="Password" name="Password" />
    <br />
    <input type="button" id="btnLogin" class="btn" value="Sign In" />
</form>

var signIn = function () {
    var signinUrl = "http://localhost/QRG.MVC/token";
    var signInData = $("#userLogin").serialize();
    signInData = signInData + "&grant_type=password";
    debugger;
    $.ajax({ type: "POST", url: signinUrl, data: signInData, success: saveAccessToken });
};

var token = "";
var saveAccessToken = function (data) {
    token = data.access_token;
    debugger;
    $.redirect("/QRG.MVC/Home/About", { 'Authorization': 'Bearer ' + token });
  // also tried using the myRedirect function below: 
  // myRedirect("http://localhost/QRG.MVC/Home/About", "Authorization", "Bearer " + token);
};

var myRedirect = function (redirectUrl, arg, value) {
    var form = $('<form action="' + redirectUrl + '" method="post">' +
    '<input type="hidden" name="' + arg + '" value="' + value + '"></input>' + '</form>');
    $('body').append(form);
    debugger;
    $(form).submit();
};

This redirects me to a 401 Unuthorized (About)

Is is possible to redirect to another page but add Auth Bearer token to the header first?

Thanks