Laravel+SSR은 로그인 상태 저장을 구현합니다. (자세한 단계 설명)

이 글은 Laravel+SSR에 대한 관련 지식을 제공합니다. 관심 있는 분들은 아래 내용을 참고해 보시기 바랍니다.

Laravel + Nuxt3 기반 온라인 데모(https://laravel-nuxt3.ruti.page/)

Laravel + SSR nuxt: 로그인 상태를 저장하는 방법은 무엇입니까?

Laravel + Vue의 클라이언트 측 렌더링은 실제로 작성 속도가 더 빠르지만 때로는 클라이언트 측 렌더링, 서버 측 렌더링에 비해 전자 상거래, 포털, 포럼 및 대규모 프로젝트와 같은 SEO가 정말로 필요합니다. 첫 화면 로딩 시간의 이점은 실로 압도적입니다.

그런데 많은 학생들이 SSR에 로그인 상태를 저장하는 방법, 즉 기존 PHP/JSP 페이지처럼 페이지를 새로 고친 후 로그인 상태를 유지하는 방법에 대한 문제로 막히고 있습니다

준비

먼저 준비 2 인터페이스 중 하나는

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

Nuxt3와 비교하면 Nuxt2는 store/index.js의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!