이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!