Laravel+SSR implements saving login status (detailed explanation of steps)-Laravel-php.cn

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

藏色散人

Release： 2023-02-09 20:21:54

forward

1758 people have browsed it

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

Copy after login

User gets the current logged in user information

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

Copy after login

is used to request authorization

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

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

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

Copy after login

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

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

Copy after login

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, &#39;token&#39;);
        if (!!token) {
            commit(&#39;auth/setToken&#39;, token);
        }
    }
};

Copy after login

store/auth.js

import Cookie from &#39;js-cookie&#39;;
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(&#39;setToken&#39;, token);
        Cookie.set(&#39;token&#39;, token);
    },
    async fetchUser({ commit }){
        try{
            const { data } = await this.$axios.get(&#39;/auth/user&#39;);
            commit(&#39;fetchUserSuccess&#39;, data);
        }catch(e){
            Cookie.remove(&#39;token&#39;);
            commit(&#39;fetchUserFailure&#39;);
        }
    },
    // ...
}

Copy after login

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!