XXとしてる: Nuxtとクッキーと認証と

Nuxt.jsでWebサイトを作っているところ、ようやくユーザーのログイン/サインアップ処理ができたところ、ログインした状態でブラウザを閉じてもう一度開くとログイン状態が解除されていた。

<div style="text-align: center;">そぉんなぁ！！</div>

一体どうしたらいいんだ・・・

## Cookieって？

HTTP通信ではあるデータを使ったとか記録したという状態は持たないため、このような問題が起きたそうだ。

毎回ログインするのは結構困るのでどうにかしたいところ、Cookieというものにデータを保存するといいらしい。

CookieはHTTPリクエストのヘッダーにも含まれており、各サイトごとに専用のデータを保存するのに適しているものだ。

色んなサイトでこのサイトはクッキーを使用していますと注意書きしていたり、使用許可を要求してくるが、ユーザーを認識するのに適したものである。

ただしいわゆる個人番号的なものなので、そのサイトで行っていることが筒抜けになってしまうので最近EUでクッキー法と呼ばれる法律が定められたりと取扱がデリケートなものでもある。

<div style="text-align: center;">公開するときプライバシーポリシーとか書かないといけないなぁ</div>

クッキー自体は単なるデータの保存先なので、Cookie自体が悪いわけではない。

## Nuxt.jsのミドルウェア

そんなわけでクッキーを使ってユーザー認証用のデータを保存すれば今回の問題は解決！終わり！

とは行かなかったので、<a href="https://ja.nuxtjs.org/guide/routing#%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2">Nuxt.jsのミドルウェア</a>についても書いていく

Nuxt.jsのミドルウェアは各ページを読み込む前に行える前処理的なものになる。

なのでそれを使い先にユーザー認証用のデータが既にある/ない場合にアクセスできるページに制限を設けていた。

例えば、ログインしているときにログインページへまたアクセスするとユーザーページにリダイレクトするといった感じだ。

ページ上でログインしたあとならこれで正常に動作していたのだが・・・

## サイトを最初に開いたときにアクセス制限が機能しない・・・だと

<div style="text-align: center;">これに気がついたときのテンション</div>

クッキーに認証用データを保存はしたのだが、処理自体はVuexのステート内にあるデータを使用しているため、そちらにクッキーのデータを反映する必要があった。
クッキーにユーザー認証データを保存するのは簡単だったのだが、それを参照する方法に戸惑ってしまったのが今回の一番大きな問題である。

そのためミドルウェアを利用したのだが、Nuxt.jsの特徴であるサーバーサイドレンダリングあたりでハマってしまった。

Nuxt.jsはサーバーサイドレンダリングに対応しているためミドルウェアはサーバーサイドでも動作しうる。

そのタイミングはよくわかっていないが、サイトに最初にアクセスしたときはサーバーサイドでミドルウェアが実行される。

クッキーはブラウザに保存されるものなので、サーバー側ではブラウザ側と同じ方法ではアクセスできない。(代わりにHTTPヘッダーを参照する)

このような感じで、クッキーのデータをVuexへ反映できない ＝＞ 認証がうまく働いていない という結果になってしまった。

解決策はミドルウェアの処理でサーバー側とブラウザ側の二通りの処理を作り、呼び出されている側を認識して切り替えることだ。

`process.server`でサーバー側なのか判断できる。

```js
export default context => {
  if (process.server) {
    // サーバー側
    context.req.headers.cookie
    // ...
  } else {
    // ブラウザ側
    Cookie.get('')
    // ...
  }
}
```

これで無事解決できた。

## 終わりに

HTTP通信にはセッションというものもあり、そちらでもデータを記録できるが今回はVuexで肩代わりできているので使っていない。

<span style="font-size: 8px">もしかしたら、Vuexの内部で使っているかもしれないけど・・・</span>

（画像は以下のものを使用させていただきました。）

XXとしてる

2019年3月21日木曜日

Nuxtとクッキーと認証と

0 件のコメント:

コメントを投稿