Angularで履歴を変えずにブラウザのURLを置き換える #JavaScript

例えば、トークンなどをURLのパラメータから取得するようなケースで、トークンを取得後、ブラウザのアドレスバーに表示されているパラメータの部分を削除したい。

これを↓

https://example.com/foo?token=n8ml2n4pabgsa

こうしたい↓

https://example.com/foo

Location#replaceStateを使う

Angular - Location

Locationは、アプリケーションがブラウザのURLとやりとりできるようにするためのAngularのservice。このLocationクラスのreplaceStateメソッドを使うと、今回のテーマでもあるブラウザのURLの置き換えができる。

replaceState(path: string, query: string = ''): void

replaceStateメソッドは、ブラウザのURLを、与えられたURLに正規化しながら変更し、プラットフォームの履歴スタックの一番上のものと置き換えてくれる。つまり、履歴を変えずにブラウザのURLを置き換えることを可能にしてくれる。

実装例

Locationモジュールの読み込み

import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

@Moduleや@Componentのprovidersに登録

providers: [
  Location,
  { provide: LocationStrategy, useClass: PathLocationStrategy } // <= これはなくても良い
],

Componentに実装（コンポーネントが生成された際にURLを置き換える場合）

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({

...

})
export class Foo implements OnInit {
  constructor(
    private location: Location,
  ) { }

  ngOnInit() {
    this.location.replaceState('foo');
  }
}

これで例えばhttps://example.com/foo?token=n8ml2n4pabgsaだったURLがhttps://example.com/fooに置き換えられる。

なお、replaceStateの第二引数には、クエリが設定可能。

this.location.replaceState('foo', 'bar=baz');

上記のようにクエリを設定すると、https://example.com/foo?bar=bazに置き換えられる。

参考

[補足] Angularじゃない場合

ちなみに、Angularアプリ以外のところでは、HTML5で導入されたhistory.replaceState()を使うと同様のことが実現できる。

history.replaceState(data, title, url);