I have a simple log in form which POST
s 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