angularjsthinktecture-ident-serverangular-new-routeridentityserver2ngcomponentrouter

How to deal with extra hash in route? (AngularJS 1.5 + new/component router)


We're attempting to build an app using Angular 1.5 with the new component router bits. We've run into a bit of an edge case and we're wondering if there's any way around it.

The Key Players

The Goal

We'd like to take a URL such as http://mysite/#!/auth/#auth_token=xyz123 (structure not under our control, e.g. can't remove second hash) and:

Background / Problem

Our client has a central login system where they're using IdentityServer v2. As far as I understand, when we request a token from IdSrv v2, it responds by appending #auth_token=xyz123 to your redirect URL. It was written back when it thought you'd have my.com/login.html, thus resulting in login.html#auth_token=xyz123.

With an Angular app that uses a hash already, though, it becomes a problem, as the URL ends up along the lines of mysite.com/#/auth#auth_token=xyz123.

This, as you might expect, makes Angular angry. We have yet be able to find a way to get this to work under the component router.

How it Would Work With the Older Routers

Per the oauth-ng docs, if we were using the older router without html5 enabled, we'd do something like the following:

angular.module('app').config(function ($routeProvider) {
  $routeProvider
    .when('/access_token=:accessToken', {
      template: '',
      controller: function ($location, AccessToken) {
        var hash = $location.path().substr(1);
        AccessToken.setTokenFromString(hash);
        $location.path('/');
        $location.replace();
      }
    })

What We've Tried

What We Think our Options Are

Anything that could point us in the right direction would be greatly appreciated!


Solution

  • To follow up on this: in the end, we decided that this was a strange enough edge-case that it warranted returning to ui-router.

    While we think the component router makes the most sense, the deciding factor here is that, unfortunately, we don't have 100% control over our routes. The route constraint included the edge case that component-router did not seem capable of handling at the current time.

    For those who are working with older oauth server systems, I hope this will serve as a warning / some background as you're making your choice of router.

    Hopefully ngComponentRouter will better support this edge case in the future, though I wouldn't blame them for leaving it out.