搜索
首页php框架LaravelLaravel+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%

f8d4b9b01b181c0b8a147de99c9c3b0.jpg

开始 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中文网其他相关文章!

声明
本文转载于:learnku。如有侵权,请联系admin@php.cn删除
Laravel的影响:简化网络开发Laravel的影响:简化网络开发Apr 21, 2025 am 12:18 AM

Laravel通过简化Web开发过程和提供强大功能脱颖而出。其优势包括:1)简洁的语法和强大的ORM系统,2)高效的路由和认证系统,3)丰富的第三方库支持,使得开发者能专注于编写优雅的代码并提高开发效率。

Laravel:前端还是后端?澄清框架的角色Laravel:前端还是后端?澄清框架的角色Apr 21, 2025 am 12:17 AM

laravelispredminandermanthandermanthandermanthandermanthermanderframework,设计Forserver-SideLogic,databasemagement,andapideplupment,thryitalsosupportsfortfortsfrontenddevelopmentwithbladeTemplates。

Laravel vs. Python:探索性能和可扩展性Laravel vs. Python:探索性能和可扩展性Apr 21, 2025 am 12:16 AM

Laravel和Python在性能和可扩展性方面的表现各有优劣。Laravel通过异步处理和队列系统提升性能,但受PHP限制在高并发时可能有瓶颈;Python利用异步框架和强大的库生态系统表现出色,但在多线程环境下受GIL影响。

Laravel vs. Python(与框架):比较分析Laravel vs. Python(与框架):比较分析Apr 21, 2025 am 12:15 AM

Laravel适合团队熟悉PHP且需功能丰富的项目,Python框架则视项目需求而定。1.Laravel提供优雅语法和丰富功能,适合需要快速开发和灵活性的项目。2.Django适合复杂应用,因其“电池包含”理念。3.Flask适用于快速原型和小型项目,提供极大灵活性。

Laravel的前端:探索可能性Laravel的前端:探索可能性Apr 20, 2025 am 12:19 AM

Laravel可以用于前端开发。1)使用Blade模板引擎生成HTML。2)集成Vite管理前端资源。3)构建SPA、PWA或静态网站。4)结合路由、中间件和EloquentORM创建完整Web应用。

PHP和Laravel:构建服务器端应用程序PHP和Laravel:构建服务器端应用程序Apr 20, 2025 am 12:17 AM

PHP和Laravel可用于构建高效的服务器端应用。1.PHP是开源脚本语言,适用于Web开发。2.Laravel提供路由、控制器、EloquentORM、Blade模板引擎等功能,简化开发。3.通过缓存、代码优化和安全措施,提升应用性能和安全性。4.测试和部署策略确保应用稳定运行。

Laravel vs. Python:学习曲线和易用性Laravel vs. Python:学习曲线和易用性Apr 20, 2025 am 12:17 AM

Laravel和Python在学习曲线和易用性上的表现各有优劣。Laravel适合快速开发Web应用,学习曲线相对平缓,但掌握高级功能需时间;Python语法简洁,学习曲线平缓,但动态类型系统需谨慎。

Laravel的优势:后端发展Laravel的优势:后端发展Apr 20, 2025 am 12:16 AM

Laravel在后端开发中的优势包括:1)优雅的语法和EloquentORM简化了开发流程;2)丰富的生态系统和活跃的社区支持;3)提高了开发效率和代码质量。Laravel的设计让开发者能够更高效地进行开发,并通过其强大的功能和工具提升代码质量。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境