Rumah > Artikel > rangka kerja php > Laravel+SSR melaksanakan menyimpan status log masuk (penjelasan terperinci tentang langkah)
Artikel ini membawakan anda pengetahuan yang berkaitan tentang Laravel+SSR terutamanya cara menyimpan status log masuk di bawah Laravel SSR Bagi mereka yang berminat, sila lihat di bawah.
Demo Dalam Talian berdasarkan Laravel + Nuxt3 (https://laravel-nuxt3.ruti.page/)
Laravel + SSR nuxt: Bagaimana untuk menyimpan status log masuk?
Laravel + Vue yang diberikan oleh pihak pelanggan sememangnya lebih pantas untuk ditulis, tetapi kadangkala kami benar-benar memerlukan SEO, seperti e-dagang, portal, forum dan untuk projek besar, berbanding dengan pelanggan Side-side pemaparan, kelebihan masa pemuatan skrin pertama yang dibawa oleh pemaparan sebelah pelayan sememangnya memberangsangkan.
Tetapi ramai pelajar terperangkap dalam isu bagaimana untuk menyimpan status log masuk di bawah SSR, iaitu cara mengekalkan status log masuk selepas memuat semula halaman seperti halaman PHP/JSP tradisional
Kerja Penyediaan
Pertama sediakan 2 antara muka, satu ialah
GET http://example.com/api/auth/user
Pengguna mendapat maklumat pengguna log masuk semasa
POST http://example.com/api/auth/tokens
untuk meminta kebenaran
Berikut ialah contoh lengkap dengan GitHub OAuth laravel-nuxt3-api dan liputan ujian adalah 100%
Mulakan SSR
Nuxt3
Dalam Nuxt3, anda boleh mencipta skrip pelayan sahaja secara bebas apabila memulakan keseluruhan Apl Nuxt. , anda boleh melaksanakan skrip pelayan sahaja ini sebelum memaparkan html, dan menggunakan hasil yang dikembalikan apabila memaparkan html.
Kami boleh mencipta skrip pelayan sahaja bagi *.server.[js|ts] di bawah pemalam,
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(); } });
takrif pinia dalam store/auth.js untuk mengurus status global, Dan hantar permintaan tak segerak di sana
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); } }, // ... }, });
Nota: Tidak disyorkan untuk menggunakan pakej http pihak ketiga seperti axios dalam Nuxt3, tetapi gunakan useFetch() terbina dalam
Contoh lengkap? laravel-nuxt3-web
Nuxt2
Dalam Nuxt2, tidak seperti Nuxt3, Nuxt2 hanya boleh digunakan di kedai/ index Jalankan skrip pelayan sahaja dalam nuxtServerInit() dalam .js (tetapi di sini kita boleh menggunakan 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'); } }, // ... }
Kod yang lebih lengkap? Nuxt middleware untuk menyemak sama ada pengguna log masuk tidak berfungsi
Disyorkan kajian: "tutorial video laravel"
Atas ialah kandungan terperinci Laravel+SSR melaksanakan menyimpan status log masuk (penjelasan terperinci tentang langkah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!