Laravel+SSR implements saving login status (detailed explanation of steps)

This article brings you relevant knowledge about Laravel SSR. It mainly introduces how to save the login status under Laravel SSR. For those who are interested, take a look below. I hope it will be helpful to everyone.

Online Demo based on Laravel Nuxt3 (https://laravel-nuxt3.ruti.page/)

Laravel SSR nuxt: How to save login status?

Laravel client-side rendering of Vue is indeed faster to write, but sometimes we really need SEO, such as e-commerce, portals, forums; and for large projects, compared to the client Rendering, the advantage of first screen loading time brought by server-side rendering is indeed overwhelming.

But many students are stuck on the issue of how to save the login status under SSR, that is, how to keep the login status after refreshing the page like the traditional PHP/JSP page

Preparation Work

First prepare 2 interfaces, one is

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

User gets the current logged in user information

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

is used to request authorization

Here are A complete example with GitHub OAuth? laravel-nuxt3-api and test coverage is 100%

##Start SSR

• Nuxt3

In Nuxt3, you can freely create a server only script. When initializing the entire Nuxt App, you can render it Execute this server-only script before html and use its returned results when rendering html.

We can create a server only script of *.server.[js|ts] under 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();
    }
});

define pinia that manages global status in store/auth.js, and Which sends an asynchronous request

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

Note: It is not recommended to use third-party http packages such as axios in Nuxt3, but use its built-in useFetch()

Complete example?

laravel- nuxt3-web

• Nuxt2

In Nuxt2, unlike Nuxt3, Nuxt2 can only be used in store/index.js Run server only script in nuxtServerInit() (but we can use axios here)

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

More complete Code?

Nuxt middleware to check if user is logged in not working

Recommended study: "

laravel video tutorial"

The above is the detailed content of Laravel+SSR implements saving login status (detailed explanation of steps). For more information, please follow other related articles on the PHP Chinese website!