めちゃめちゃ久しぶりの投稿です。
先日までコミットしていたプロジェクトの中で自分のリサーチとスキルではどうにもできなかった404ページへのリダイレクトの処理について。
先輩に教えていただいたので備忘録として書いておきます。
今回実現させたかったこと
今回実現させたかったのは、大きく分けて2つです。
- /hogehoge/tokenのようなURLが叩かれたときにtokenが正規のものか判断する
- 正規のものである場合、tokenが合致するデータをデータベースからGETする
- 正規のものでない場合、404ページへリダイレクトさせる
これらをReact+TypeScriptのプロジェクト内で実現させるというタスクでした。
行き詰まった点
「tokenが正しいかどうかとか、どうやって判断したらいいん。。。」
大きくいってこの点でした。
今までHTMLとCSSでやってきたので、もう何を使えばいいんかもわからずどう調べればいいのかも分かりませんでした。
あとは今までリダイレクトさせる処理は.htaccessで記載してたので、それ以外でどうやった手法があるのかもわからず行き詰りました。
エラーを検知するtry...catch文
tokenの正誤判別にはtry...catch文を使いました。
MDNのドキュメントのリンクを貼っておきます。
で、サンプルコードです。
try {
// テストする文
}
catch (e) {
// エラー時に走る処理
}
このような感じにtry...catch文は使われます。
なので、今回私が実現したかったことを実現しようとすると
try {
const { data: hogehogeList } = await request.get({
uri: '/hoge',
params: { token },
});
}
catch (e) {
// リダイレクト処理
}
みたいな書き方になります。
こうすることで、tokenが正規のものである場合はデータベースから該当するリストをGETしてきて、
もしtokenが正規のものでない場合は、errorとなりリダイレクトの処理が走ります。
ちなみにuriはAPIが置いてある場所で、paramsはデータをGETする際に必要なパラメータです。
リダイレクト処理をさせるモジュールhistory
リダイレクトさせるにあたって、今回はhistoryというモジュールを使用しました。
これを使用してリダイレクトの処理を実装しました。
参考にした記事は以下の記事になります。
history.push();でアクションを起こした時にページ遷移をする
実際に書いたコードは以下になります。
try {
const { data: hogehogeList } = await request.get({
uri: '/hoge',
params: { token },
});
}
catch (e) {
history.push('/not-found');
window.location.reload();
}
このようにすることで、先ほど書いたGETが失敗に終わった際には
404ページに遷移させることができました。
まとめ
今回の総括ですが、
- try...catch文を使うことで、ある処理が失敗したときには別処理を走らせることができる
- historyを使うと、遷移させたいページに遷移させる処理を行うことができる
なお、このプロジェクトではreact-router-domを使用してルーティングさせてましたので、
上記の処理を実装する流れとなりました。
先輩曰く、もっと良い処理があるらしいのですがそれはまた別の機会に。