7

I am using ui-router in an angular site I'm making, but cant get it to allow routes through to my server. I have facebook oauth authentication on my server, where I navigate to /auth/facebookand the server will redirect to fb, intercept the callback and redirect the client back to the homepage.

It works fine when navigating to the /auth/facebook url in a browser it works fine, but ui-router watches location and intercepts all of my location changes.

Any ideas how I can make a url request bypass the $urlRouterProvider.otherwise(...) statement to allow a route through to my api server? I've tried adding route redirects with the router provider, but it won't trigger a remote call.

mrosales
  • 1,543
  • 11
  • 18
  • What's the full url in both cases. – Jorg Jun 24 '14 at 04:00
  • its a local url so right now I'm on a development server so its 'http://localhost:9000/auth/facebook' ui-router states are in the form 'http://localhost:9000/about'. Also, it works fine if I just disable html5 mode. – mrosales Jun 24 '14 at 04:11
  • Yeah, HTML5 mode would've been my next question. Angular removes the hash bang, turning `index.html#/about/facebook` into `/about/facebook`. If you wish to keep it, you may be able to do something with server side access like htaccess. Otherwise, maybe angulars onroutechange events? – Jorg Jun 24 '14 at 04:14
  • Yeah, I may just opt for turning of html5 mode, but I feel like there should be a way to force a specific route to load from the server – mrosales Jun 24 '14 at 04:17
  • Try setting the link to the full url instead of the short one `localhost:9000/auth/facebook` instead of '/auth/facebook'. Your server still knows wether or not you're requesting index.html – Jorg Jun 24 '14 at 04:20
  • Yeah, I tried that but ui-router seems to intercept all location changes before querying the server – mrosales Jun 24 '14 at 04:31
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56157/discussion-between-jorg-and-micah-rosales). – Jorg Jun 24 '14 at 04:34

2 Answers2

6

Thanks to the guys at angular-dart: As a workaround you could create an ng-click handler that does window.location.assign('/auth/facebook') to bypass the router

Jorg
  • 7,219
  • 3
  • 44
  • 65
  • using `ng-click` wasn't working for me so I just made `ng-click` call a function on my scope which called `$window.location.assign('/auth/' + provider);` – mrosales Jun 24 '14 at 04:52
3

You can handle such requests in your app config with $urlRouterProvider:

$urlRouterProvider.when('/auth/:provider', function() {
  window.location.reload();
});

Second solution: Add target="_self" to your link like this:

<a target="_self" ng-href="{{'/auth/'+provider}}">{{provider}}</a>

Duplicate of: angular.js link behaviour - disable deep linking for specific URLs

Community
  • 1
  • 1
Betty St
  • 2,741
  • 21
  • 33