Laravel+SSR melaksanakan menyimpan status log masuk (penjelasan terperinci tentang langkah)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Laravel+SSR terutamanya cara menyimpan status log masuk di bawah Laravel SSR Bagi mereka yang berminat, sila lihat di bawah.

Demo Dalam Talian berdasarkan Laravel + Nuxt3 (https://laravel-nuxt3.ruti.page/)

Laravel + SSR nuxt: Bagaimana untuk menyimpan status log masuk?

Laravel + Vue yang diberikan oleh pihak pelanggan sememangnya lebih pantas untuk ditulis, tetapi kadangkala kami benar-benar memerlukan SEO, seperti e-dagang, portal, forum dan untuk projek besar, berbanding dengan pelanggan Side-side pemaparan, kelebihan masa pemuatan skrin pertama yang dibawa oleh pemaparan sebelah pelayan sememangnya memberangsangkan.

Tetapi ramai pelajar terperangkap dalam isu bagaimana untuk menyimpan status log masuk di bawah SSR, iaitu cara mengekalkan status log masuk selepas memuat semula halaman seperti halaman PHP/JSP tradisional

Kerja Penyediaan

Pertama sediakan 2 antara muka, satu ialah

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

Pengguna mendapat maklumat pengguna log masuk semasa

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

untuk meminta kebenaran

Berikut ialah contoh lengkap dengan GitHub OAuth laravel-nuxt3-api dan liputan ujian adalah 100%

Mulakan SSR

• Nuxt3

Dalam Nuxt3, anda boleh mencipta skrip pelayan sahaja secara bebas apabila memulakan keseluruhan Apl Nuxt. , anda boleh melaksanakan skrip pelayan sahaja ini sebelum memaparkan html, dan menggunakan hasil yang dikembalikan apabila memaparkan html.

Kami boleh mencipta skrip pelayan sahaja bagi *.server.[js|ts] di bawah pemalam,

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();
    }
});

takrif pinia dalam store/auth.js untuk mengurus status global, Dan hantar permintaan tak segerak di sana

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);
            }
        },
        // ...
    },
});

Nota: Tidak disyorkan untuk menggunakan pakej http pihak ketiga seperti axios dalam Nuxt3, tetapi gunakan useFetch() terbina dalam

Contoh lengkap? laravel-nuxt3-web

• Nuxt2

Dalam Nuxt2, tidak seperti Nuxt3, Nuxt2 hanya boleh digunakan di kedai/ index Jalankan skrip pelayan sahaja dalam nuxtServerInit() dalam .js (tetapi di sini kita boleh menggunakan 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');
        }
    },
    // ...
}

Kod yang lebih lengkap? Nuxt middleware untuk menyemak sama ada pengguna log masuk tidak berfungsi

Disyorkan kajian: "tutorial video laravel"

Atas ialah kandungan terperinci Laravel+SSR melaksanakan menyimpan status log masuk (penjelasan terperinci tentang langkah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!