🙄
ReactとかNext.jsのアクセス制御
課題としては、SPAでのアクセス制御。
- ユーザーがログインしたら特定の画面にアクセスできる
- ログインしてない場合はアクセスできないようにする。
- ログインしている時はログイン画面からリダイレクトする
などなど。
リダイレクトする前に画面が見えてしまう。
functional componentでuseEffectで制御しようとすると、見せたくない画面が一瞬表示される。
を読む限りわりとどうしようもないっぽい。
コンポーネント自体へのアクセスと表示は許容して、Conditional Renderingで見せたくないhtmlを表示しないというのがいいかもしれない。
こちらにも書いていた
これは過剰な複雑さのように思えるかもしれませんが、それほど心配することではありません。この利点は、 useEffect はレイアウトとペイントの後に実行されるため、遅い副作用がUIを台無しにすることがないということです。欠点としては、ライフサイクルの古いコードをHooksに移行する際に注意する必要があるということです。 useEffect は componentDidMount とほぼ同等ですが、タイミングに関しては完全に同じというわけではないということです。
参考:
オフィシャルのもしっかり読むと
By default, React runs the effects after every render — including the first render. (We’ll talk more about how this compares to class lifecycles in Using the Effect Hook.)
と書いてある。
クリーンアップ処理は、「useEffectではマウント時に実行した処理をアンマウント時に解除する処理」のこと(参照)
Discussion