概要
- ページを表示する前に色々チェックできる
- 外部JSに定義できるので、チェックロジックを共通化しやすい
- ページ固有のロジックとして持たせる書き方も可能
middlewareを設定する
/middleware 配下にJSファイルを作る
sampleMiddleware.js
export default function (context) {
// do something
}
ページまたはレイアウトファイルに下記のような一文を追加
page.vue
export default {
middleware: 'sampleMiddleware'
}
配列で指定すれば、複数指定も可能
page.vue
export default {
middleware: ['sampleMiddleware', 'checkUser']
}
基本
ミドルウェアは第一引数として コンテキスト を受け取ります
とある通り、第一引数にいろんな情報が入ったオブジェクトが入っている。
export default function (context) {
console.log(context) // { store:..., params..., }
}
基本的にはcontextを使わず、引数の分割代入を使って、必要なデータだけを受け取って使う。
export default function ({ store, params }) {
const id = params.id
const data = store.dispatch(...)
}
ユースケース
vuexのstoreを使いたい
storeに入っている。
export default function ({ store }) {
const data = store.dispatch(...)
}
ルーティング情報を使いたい（$route.params）
paramsに入っている。
export default function ({ params }) {
const id = params.id
}
リダイレクトしたい
redirectというメソッドが用意されている。
このメソッドを何らかのアラートを出した後のコールバック関数として使うこともできるが、
その場合、ページ側のロジックも実行されてしまう。
リダイレクトは即座に実行し、アラートは表示するだけ（OKを押したら閉じるのみ）にした方がよさそうである。
// 問答無用でログイン画面に飛ばす悪のコード
export default function ({ redirect }) {
return redirect('/login')
}
async await 使いたい
async functionにすればOK
import dataApi from 'dataApi'
export default async function ({store, params, redirect}) {
try {
const res = await dataApi.get(params.id)
...
} catch(e) {
...
}
}
export defaultに直接処理を書かず、別途定義したい
変数名はファイル名と違うものにする必要あり。export方法を間違えてもエラーとなる。
const check = ({store, params, redirect}) => {
const offerId = params.id
...
}
export default check
こう書くとうまく行かない。unknown middlewareエラーになる。
なお、この書き方で変数名をファイル名と揃えた場合、 already defined エラーになる
// unknown middlewareエラー or already defined エラーになる
export default {
check
}