Laravel+SSR實現保存登入狀態（步驟詳解）

本篇文章為大家帶來了關於Laravel SSR的相關知識，其中主要介紹了有關Laravel SSR 下是如何保存登入狀態的，感興趣的朋友，下面一起來看一下，希望對大家有幫助。

基於 Laravel Nuxt3 的線上 Demo（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 中，可以很自由地建立一個server only 的腳本，在initial 整個Nuxt App 時，可以在渲染html 前執行這個server only 的腳本，並在渲染html 時使用其傳回的結果。

我們可以在plugins 下面建立一個*.server.[js|ts] 的server only 的腳本，

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

在Nuxt2 中，有別於Nuxt3，Nuxt2 只能在store/index.js 的nuxtServerInit() 中執行server only 的腳本（但這裡我們可以使用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 middleware to check if user is logged in not working

推薦學習：《laravel影片教學》

以上是Laravel+SSR實現保存登入狀態（步驟詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！