🗒️

【Nuxt.js】middleware内で使えるものまとめ

1 min read

middleware/〇〇.js

export default function ({ store, route, from, params, query, isDev, redirect, error }) {

    // store
    // store内のstateの参照やactionsの呼び出しなど
    if (!store.state.auth.isLogin) {
        store.dispatch('auth/login')
    }

    // route
    // URLのパスやパラメータを取得する
    if (route.path === '/') {
        // ・・・
    }

    // from
    // 遷移元のrouteオブジェクト
    // 遷移元と遷移先のパスが同じ場合は、画面遷移ではなくリンク直アクセスだと判断できる。
    if (from.path === route.path) {
        // ・・・
    }

    // params
    // route.paramsと同じ
    p = params

    // query
    // route.queryと同じ
    q = query
    
    // isDev
    // 開発モードでの実行か否かが取得できる
    if (isDev) {
        // ・・・
    }

    // redirect
    // 任意のパスを指定しリダイレクトする
    redirect('/login')

    // error
    // ステータスコードを指定してエラーページを表示できる
    error({ statusCode: 401, message: '権限がありません。' })
}

他にもいくつかありますがよく使うものはこれくらいだと思います。