Laravel Sanctum - 登录用户最佳实践

Question

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

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

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

现在如果用户刷新浏览器，状态会丢失，但 laravel_session 和 XSRF-TOKEN 仍然可用且有效。

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

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

编辑

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

Answer 1

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

商店.js

store.js 跟踪 user 和 isLoggedIn 状态。

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)
                }
            }
        }
    }
};

utils.js

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

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

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

登录.vue

在 login.vue 中，我从 utils.js 调用 logIn() 来设置 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");
    }
});