时间戳

首页 > 解决方案 > Laravel Sanctum - 登录用户最佳实践

laravel - Laravel Sanctum - 登录用户最佳实践

问题描述

我想知道检查用户是否仍在客户端登录的最佳做法是什么。

假设用户登录。如果成功，它将保存在状态中，如下所示：

axios.post('/login').then(() => {
  this.state.loggedInUser = true
});

现在，如果用户刷新他们的浏览器，状态就会丢失，但laravel_sessionandXSRF-TOKEN仍然可用且有效。

在每次重新加载页面时添加中间件以请求检索当前登录用户的信息是否有意义？像这样的东西？：

const authMiddleware = () => {
  axios.get('/user').catch(() => console.error('user is not logged in!'));
};

编辑

请注意，我在 SPA 模式下使用 Sanctum。所以没有代币。

标签： laravelvue.jsvuexnuxt.jslaravel-sanctum

解决方案

在我的 SPA 中使用 Vue 和 Vuex，我已经设法使用以下设置跟踪经过身份验证的用户：

store.js

store.js 跟踪userandisLoggedIn状态。

import { isLoggedIn } from "./utils";
export default {
    state: {
        isLoggedIn: false,
        user: {}
    },
    mutations: {
        setUser(state, payload) {
            state.user = payload;
        },
        setLoggedIn(state, payload) {
            state.isLoggedIn = payload;
        }
    },
    actions: {
        async loadUser({ commit, dispatch }) {
            if (isLoggedIn) {
                try {
                    const user = (await axios.get("/user")).data;
                    commit("setUser", user);
                    commit("setLoggedIn", true);
                } catch (error) {
                    console.log(error)
                }
            }
        }
    }
};

实用程序.js

utils.js 包含用于从本地存储设置和获取登录状态的帮助程序。

  
export function isLoggedIn() {
    return localStorage.getItem("isLoggedIn") == "true";
}

export function logIn() {
    localStorage.setItem("isLoggedIn", true);
}

登录.vue

在 login.vue 中，我logIn()从 utils.js 调用来设置 LocalStorage 中的 isLoggedIn 值。

此外，loadUser正在调度操作以在 Vuex 存储中设置用户信息。

<script>
import { logIn } from "../utils";
 methods: {
        async login() {
            try {
                await axios.get("/sanctum/csrf-cookie");
                await axios.post("/login", {
                    email: this.email,
                    password: this.password
                });
                logIn();
                this.$store.dispatch("loadUser");
                this.$router.push('/');
            } catch (error) {
                console.log(error);
            }
        }
    }
</script>

应用程序.js

该loadUser操作也将在此处发送，以使登录后的用户信息在全球范围内可用。

const app = new Vue({
    ...
    async beforeCreate() {
        this.$store.dispatch("loadUser");
    }
});

推荐阅读