首页 php框架 Laravel Laravel+SSR实现保存登录状态(步骤详解)

Laravel+SSR实现保存登录状态(步骤详解)

Feb 09, 2023 am 11:08 AM
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%

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PHP 与 Flutter 的比较:移动端开发的最佳选择 PHP 与 Flutter 的比较:移动端开发的最佳选择 May 06, 2024 pm 10:45 PM

PHP 与 Flutter 的比较:移动端开发的最佳选择

PHP中如何使用对象-关系映射(ORM)简化数据库操作? PHP中如何使用对象-关系映射(ORM)简化数据库操作? May 07, 2024 am 08:39 AM

PHP中如何使用对象-关系映射(ORM)简化数据库操作?

Laravel - Artisan 命令 Laravel - Artisan 命令 Aug 27, 2024 am 10:51 AM

Laravel - Artisan 命令

PHP 单元测试工具的优缺点分析 PHP 单元测试工具的优缺点分析 May 06, 2024 pm 10:51 PM

PHP 单元测试工具的优缺点分析

Laravel和CodeIgniter的最新版本对比 Laravel和CodeIgniter的最新版本对比 Jun 05, 2024 pm 05:29 PM

Laravel和CodeIgniter的最新版本对比

Laravel 和 CodeIgniter 中数据处理能力的比较如何? Laravel 和 CodeIgniter 中数据处理能力的比较如何? Jun 01, 2024 pm 01:34 PM

Laravel 和 CodeIgniter 中数据处理能力的比较如何?

PHP 代码单元测试与集成测试 PHP 代码单元测试与集成测试 May 07, 2024 am 08:00 AM

PHP 代码单元测试与集成测试

Laravel和CodeIgniter:哪种框架更适合大型项目? Laravel和CodeIgniter:哪种框架更适合大型项目? Jun 04, 2024 am 09:09 AM

Laravel和CodeIgniter:哪种框架更适合大型项目?

See all articles