Laravel Sanctum - 登录用户最佳实践

Posted 2023-02-22

【中文标题】Laravel Sanctum - 登录用户最佳实践

【英文标题】：Laravel Sanctum - Logged in user best practise

【发布时间】：2020-11-12 05:35:09

【问题描述】：

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

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

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。所以没有令牌。

【问题讨论】：

你试过serverMiddleware吗？您可以访问req.headers 以提取会话。它使用连接实例，请查看***.com/questions/13147693/…。始终在服务器中运行令牌和其他敏感信息也是一种最佳做法。

供serverMiddleware参考：nuxtjs.org/api/configuration-servermiddleware

【参考方案1】：

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

store.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>

App.js

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

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

【参考方案2】：

将其存储在 sessionStorage 中，并将 sessionStorage 中的 loggedInUser 初始化为：

sessionStorage.getItem('loggedInUser') === 'true' || false