Laravel+SSRでログイン状態の保存を実装（手順の詳細説明）

この記事では、Laravel SSR に関する知識を紹介します。Laravel SSR でのログイン状態を保存する方法を中心に紹介します。興味のある方は以下をご覧ください。皆様のお役に立てれば幸いです。

Laravel Nuxt3 に基づくオンライン デモ (https://laravel-nuxt3.ruti.page/)

Laravel SSR nuxt: ログイン状態を保存するには?

Laravel の Vue のクライアント側レンダリングは確かに記述が速いですが、電子商取引、ポータル、フォーラムなどの SEO が本当に必要になる場合や、大規模なプロジェクトの場合、クライアント レンダリングと比較して、サーバーサイドのレンダリングによってもたらされる最初の画面の読み込み時間の利点は、確かに圧倒的です。

しかし、多くの学生は、SSR でログイン ステータスを保存する方法、つまり、従来の PHP/JSP ページのようにページを更新した後にログイン ステータスを維持する方法という問題で立ち往生しています。

準備作業

最初に 2 つのインターフェイスを準備します。1 つは

GET http://example.com/api/auth/user

ユーザーは現在ログインしているユーザー情報を取得します

POST http://example.com/api/auth/tokens

は承認のリクエストに使用されます

GitHub OAuth を使用した完全な例は次のとおりです?

laravel-nuxt3-api

、テスト カバレッジは 100%です

#SSR の開始

Nuxt3

• Nuxt3ではサーバー専用のスクリプトを自由に作成することができ、Nuxtアプリ全体の初期化時にレンダリングを行うことができます。このサーバー専用スクリプトを HTML の前に実行し、HTML をレンダリングするときに返された結果を使用します。

プラグインの下に *.server.[js|ts] のサーバーのみのスクリプトを作成できます。

plugins/init.server.js

import { defineNuxtPlugin } from '#app';
import { useAuth } from '~/store/auth.js';
function cookieFromRequestHeaders (key) {
    const headers = useRequestHeaders(['cookie']);
    if ('cookie' in headers) {
        const cookie = headers.cookie.split(';').find(
            c => c.trim().startsWith(`${key}=`)
        );
        if (cookie) {
            return cookie.split('=')[1];
        }
    }
    return '';
}
export default defineNuxtPlugin(async (nuxtApp) => {
    const token = cookieFromRequestHeaders('token');
    if (token) {
        const auth = useAuth(nuxtApp.$pinia);
        auth.setToken(token);
        await auth.fetchUser();
    }
});

store/auth.js でグローバル ステータスを管理する pinia を定義し、非同期リクエスト

import { defineStore } from 'pinia';
import { useCustomFetch } from '~/composables/useCustomFetch.js';
import cookie from 'js-cookie';
export const useAuth = defineStore('auth', {
    state: () => ({
        _token: '',
        _user: {},
    }),
    getters: {
        token() {
            return this._token;
        },
        user() {
            return this._user;
        },
    },
    actions: {
        async fetchUser() {
            const { data, error } = await useCustomFetch('/auth/user');
            if (error.value) {
                this.reset();
            }
            else {
                this.setUser(data.value);
            }
        },
        // ...
    },
});

注: Nuxt3 で axios などのサードパーティの http パッケージを使用することはお勧めできませんが、その組み込みの useFetch()

完全な例を使用しますか?

laravel - nuxt3-web

Nuxt2

• Nuxt2では、Nuxt3とは異なり、store/index.js Runでのみ使用できます。 nuxtServerInit() のサーバーのみのスクリプト (ただし、ここでは axios を使用できます)

store/index.js

export const actions = {
    nuxtServerInit({ commit, dispatch, route }, { req }){
        const token = cookieFromRequest(req, 'token');
        if (!!token) {
            commit('auth/setToken', token);
        }
    }
};

store/auth.js

import Cookie from 'js-cookie';
export const state = () => ({
    user: null,
    token: null
});
export const getters = {
    user: state => state.user,
    token: state => state.token,
    check: state => state.user !== null
};
export const mutations = {
    setToken(state, token){
        state.token = token;
    },
    fetchUserSuccess(state, user){
        state.user = user;
    },
    fetchUserFailure(state){
        state.user = null;
    },
    logout(state){
        state.token = null;
        state.user = null;
    },
    updateUser(state, { user }){
        state.user = user;
    }
}
export const actions = {
    saveToken({ commit }, { token, remember }){
        commit('setToken', token);
        Cookie.set('token', token);
    },
    async fetchUser({ commit }){
        try{
            const { data } = await this.$axios.get('/auth/user');
            commit('fetchUserSuccess', data);
        }catch(e){
            Cookie.remove('token');
            commit('fetchUserFailure');
        }
    },
    // ...
}

より完全なコード?

ユーザーがログインしているかどうかを確認するための Nuxt ミドルウェアが機能していない

推奨される学習: 「laravel ビデオ チュートリアル

」

以上がLaravel+SSRでログイン状態の保存を実装（手順の詳細説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。