title: page Redirect in ASP.Net MVC + Web Api + AngularJs
body: <p>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.</p>
  
  <p>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:</p>
  
  <p>For the <strong>Client Side</strong> </p>
  
  <ol>
  <li><a href="https://github.com/witoldsz/angular-http-auth" rel="nofollow">HTTP Auth Interceptor Module</a>  : a nice way to look for 401 error and bring up the login page and after that proceed from where you left out.</li>
  <li><a href="http://wemadeyoulook.at/en/blog/implementing-basic-http-authentication-http-requests-angular/" rel="nofollow">Implementing basic HTTP authentication for HTTP requests in AngularJS</a> : This is required to ensure that I am able reuse the user credentials with the subsequent requests. which is catched in the $http.</li>
  </ol>
  
  <p>On the <strong>Server Side</strong> :</p>
  
  <ol>
  <li><a href="http://stevescodingblog.co.uk/basic-authentication-with-asp-net-webapi/" rel="nofollow">Basic Authentication with Asp.Net WebAPI</a> </li>
  </ol>
  
  <p>So far so good, all my WebApi calls are working as expected, </p>
  
  <p><strong>but</strong> the issue starts when I have to make calls to the MVC controllers,  </p>
  
  <p>if I try to <code>[Authorize]</code> the methods/controllers, it throws up the forms Authentication view again on MVC even though the API has already set the Authentication Header. </p>
  
  <p>So I have 2 Questions:</p>
  
  <ol>
  <li><p>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 <strong>$http</strong> and decode it in the server side to generate my own Authentication and set the Custom.</p></li>
  <li><p>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. </p></li>
  </ol>
  
  <p>I have decorated it with the following attribute "<code>[ActionName("MyWorkspace")] [HttpGet]</code>"</p>
  
  <pre><code>    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;
      }
  </code></pre>
  
  <p>and on my meny click i invoke a angular JS function</p>
  
  <pre><code>$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);
                  }
             );
      }
  </code></pre>
  
  <p>i see in the chrome developer tool that it gets redirected and gets a 200 OK status but the view is not refreshed.</p>
  
  <p>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.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Followed Kaido's advice and found another <a href="http://cacheandquery.com/blog/2011/03/customizing-asp-net-mvc-basic-authentication/" rel="nofollow">blog</a> that explained how to create a custom CustomBasicAuthorizeAttribute. </p>
  
  <p>Now I am able to call the method on the Home controller below: decorated with '[HttpPost][CustomBasicAuthorize]'</p>
  
  <pre><code>    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);
      }
  </code></pre>
  
  <p>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 <strong>redirected call</strong> comes back its <strong>missing the header</strong> again!</p>
  
  <p>is there anything I can do to ensure the redirected call also gets the correct header set?</p>
  
  <p>BTW now my menu click looks like below:</p>
  
  <pre><code>$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);
                  }
             );
      }
  </code></pre>
  
  <p>this finally settles down to the following URL: <code>http://127.0.0.1:81/Account/Login?ReturnUrl=%2fshipper%2f</code></p>
  
  <p>Regards
  Kiran</p>