page Redirect in ASP.Net MVC + Web Api + AngularJs

I am building a ASP.Net MVC application that can work both in Web and JQuery mobile. So i am creating a seperate view for Web and JQuery mobile application. I have placed all my primary business logic services as a Web Api calls which are called by both the clients using the AngularJs which is working fine so far.

Now I was looking to introduce the security in to the application, and realized that Basic authentication is the quickest way to get going and when I looked around I found very nice posts that helped me build the same with minimal effort. Here are 3 links that I primarily used:

For the Client Side

1. HTTP Auth Interceptor Module : a nice way to look for 401 error and bring up the login page and after that proceed from where you left out.
2. Implementing basic HTTP authentication for HTTP requests in AngularJS : This is required to ensure that I am able reuse the user credentials with the subsequent requests. which is catched in the $http.

On the Server Side :

1. Basic Authentication with Asp.Net WebAPI

So far so good, all my WebApi calls are working as expected,

but the issue starts when I have to make calls to the MVC controllers,

if I try to [Authorize] the methods/controllers, it throws up the forms Authentication view again on MVC even though the API has already set the Authentication Header.

So I have 2 Questions:

1. Can We get the WebApi and MVC to share the same data in the header? in there a way in the AngularJS i can make MVC controller calls that can pass the same header information with authorization block that is set in the $http and decode it in the server side to generate my own Authentication and set the Custom.

2. In case the above is not possible, I was trying to make a call to a WebApi controller to redirect to a proper view which then loads the data using the bunch of WebApi calls so that user is not asked to enter the details again.

I have decorated it with the following attribute "[ActionName("MyWorkspace")] [HttpGet]"

    public HttpResponseMessage GotoMyWorkspace(string data)
    {
        var redirectUrl = "/";
        if (System.Threading.Thread.CurrentPrincipal.IsInRole("shipper"))
        {
            redirectUrl = "/shipper";
        }
        else if (System.Threading.Thread.CurrentPrincipal.IsInRole("transporter"))
        {
            redirectUrl = "/transporter";
        }
        var response = Request.CreateResponse(HttpStatusCode.MovedPermanently);
        string fullyQualifiedUrl = redirectUrl;
        response.Headers.Location = new Uri(fullyQualifiedUrl, UriKind.Relative);
        return response;
    }

and on my meny click i invoke a angular JS function

$scope.enterWorkspace = function(){
        $http.get('/api/execute/Registration/MyWorkspace?data=""')
          .then(
                // success callback
                function(response) {
                  console.log('redirect Route Received:', response);
                },
                // error callback
                function(response) {
                   console.log('Error retrieving the Redirect path:',response);
                }
           );
    }

i see in the chrome developer tool that it gets redirected and gets a 200 OK status but the view is not refreshed.

is there any way we can at least get this redirect to work in case its not possible to share the WebApi and MVC authentications.

EDIT

Followed Kaido's advice and found another blog that explained how to create a custom CustomBasicAuthorizeAttribute.

Now I am able to call the method on the Home controller below: decorated with '[HttpPost][CustomBasicAuthorize]'

    public ActionResult MyWorkspace()
    {
        var redirectUrl = "/";
        if (System.Threading.Thread.CurrentPrincipal.IsInRole("shipper"))
        {
            redirectUrl = "/shipper/";
        }
        else if(System.Threading.Thread.CurrentPrincipal.IsInRole("transporter"))
        {
            redirectUrl = "/transporter/";
        }

        return RedirectToLocal(redirectUrl);
    }

Again, it works to an extent, i.e. to say, when the first call is made, it gets in to my method above that redirects, but when the redirected call comes back its missing the header again!

is there anything I can do to ensure the redirected call also gets the correct header set?

BTW now my menu click looks like below:

$scope.enterMyWorkspace = function(){
        $http.post('/Home/MyWorkspace')
          .then(
                // success callback
                function(response) {
                  console.log('redirect Route Received:', response);
                },
                // error callback
                function(response) {
                   console.log('Error retrieving the Redirect path:',response);
                }
           );
    }

this finally settles down to the following URL: http://127.0.0.1:81/Account/Login?ReturnUrl=%2fshipper%2f

Regards Kiran