怎么使用Laravel和SSR实现保存登录状态

这篇“怎么使用Laravel和SSR实现保存登录状态”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用Laravel和SSR实现保存登录状态”文章吧。

准备工作

首先准备 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.jsimport { 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');        }    },    // ...}

以上就是关于“怎么使用Laravel和SSR实现保存登录状态”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。