Laravel+SSR implémente la sauvegarde du statut de connexion (étapes détaillées)

Cet article vous apporte des connaissances pertinentes sur Laravel+SSR. Il présente principalement comment enregistrer le statut de connexion sous Laravel SSR. Pour ceux qui sont intéressés, jetez un œil ci-dessous.

Démo en ligne basée sur Laravel + Nuxt3 (https://laravel-nuxt3.ruti.page/)

Laravel + SSR nuxt : Comment enregistrer le statut de connexion ?

Le rendu Laravel + côté client de Vue est en effet plus rapide à écrire, mais parfois nous avons vraiment besoin de référencement, comme le e-commerce, les portails, les forums et pour les grands projets, par rapport au rendu côté client, au rendu côté serveur ; L’avantage en termes de temps de chargement du premier écran est en effet écrasant.

Mais de nombreux étudiants sont bloqués sur la question de savoir comment enregistrer le statut de connexion sous SSR, c'est-à-dire comment conserver le statut de connexion après avoir actualisé la page comme la page PHP/JSP traditionnelle

Préparation

Première préparation 2 interfaces, l'un est

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

L'utilisateur obtient les informations de l'utilisateur actuellement connecté

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

pour demander une autorisation

Voici un exemple complet incluant GitHub OAuth laravel-nuxt3-api, et la couverture des tests est de 100 %

 ?

Démarrer SSR

• Nuxt3

Dans Nuxt3, vous pouvez librement créer un script serveur uniquement. Lors de l'initialisation de l'intégralité de l'application Nuxt, vous pouvez exécuter ce script serveur uniquement avant le rendu HTML et après le rendu. html en utilisant les résultats renvoyés.

Nous pouvons créer un script serveur uniquement de *.server.[js|ts] sous plugins,

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

définir pinia qui gère l'état global dans store/auth.js, et y envoyer des requêtes asynchrones

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

Remarque : Il n'est pas recommandé d'utiliser des packages http tiers tels que axios dans Nuxt3, mais d'utiliser son useFetch()

Exemple complet laravel-nuxt3-web

• Nuxt2

Dans Nuxt2, il est différent Par rapport à Nuxt3, Nuxt2 ne peut exécuter que des scripts serveur uniquement dans nuxtServerInit() dans store/index.js (mais nous pouvons utiliser axios ici)

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

Plus Le code complet ? Le middleware Nuxt pour vérifier si l'utilisateur est connecté ne fonctionne pas

Étude recommandée : "tutoriel vidéo laravel"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!