🙄

ReactとかNext.jsのアクセス制御

2021/09/12に公開

課題としては、SPAでのアクセス制御。

  • ユーザーがログインしたら特定の画面にアクセスできる
  • ログインしてない場合はアクセスできないようにする。
  • ログインしている時はログイン画面からリダイレクトする

などなど。

https://zenn.dev/nus3/scraps/d04f5026bab361

https://zenn.dev/catnose99/articles/2169dae14b58b6

リダイレクトする前に画面が見えてしまう。

functional componentでuseEffectで制御しようとすると、見せたくない画面が一瞬表示される。

https://daveceddia.com/react-before-render/

を読む限りわりとどうしようもないっぽい。

コンポーネント自体へのアクセスと表示は許容して、Conditional Renderingで見せたくないhtmlを表示しないというのがいいかもしれない。

https://reactjs.org/docs/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.)

と書いてある。

https://reactjs.org/docs/hooks-overview.html

クリーンアップ処理は、「useEffectではマウント時に実行した処理をアンマウント時に解除する処理」のこと(参照

関連で面白かったやつ

レガシーおじさん、SPAを始めてみた。そして限界を知る

Discussion