时间戳

首页 > 解决方案 > Laravel Sanctum + Vue 认证

laravel - Laravel Sanctum + Vue 认证

问题描述

我有一个使用 Laravel Sanctum 保护的 API。在前端，我设法使用 sanctum 登录并发布了一个新的不记名令牌。到目前为止一切顺利，但我如何将令牌（没有 Vuex）存储到本地存储以及如何告诉 axios 将该令牌用于任何未来的请求？

我的代码如下：

// AuthController.php

public function login(Request $request)
    {
        $fields = $request->validate([
            'email' => 'required|string',
            'password' => 'required|string'
        ]);

        $user = User::where('email', $fields['email'])->first();

        $token = $user->createToken('login_token')->plainTextToken;

        if (!$user || !Hash::check($fields['password'], $user->password)) {
            return response([
                'message' => 'Invalid Login Credentials'
            ], 401);
        }

        $response = [
            'user' => $user,
            'token' => $token
        ];

        return response($response, 201);
    }

// Login.vue

export default {
    methods: {
        handleLogin() {
            axios.get("/sanctum/csrf-cookie").then(response => {
                axios.post("/api/login", this.formData).then(response => {
                    if (response.status === 201) {
                        this.$router.push({ path: "/" });
                    }
                    console.log(response);
                });
            });
        }
    },
    data: function() {
        return {
            logo: logo,
            formData: {
                email: "",
                password: ""
            }
        };
    }
};

登录工作正常，它返回了预期的结果，但我不知道如何存储生成的令牌以及如何将其发送到任何未来的 axios 请求。

谢谢。

*** 更新 ***

好的，所以我想出了如何发送标头，我正在这样做：

 axios
            .get("/api/expenses/", {
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "Bearer " + "6|cnuOY69grhJiZzxEHoU74PapFkkcJeqbf3UiKx8z"
                }
            })
            .then(response => (this.expenses = response.data.data));
    }

剩下的唯一一点是我如何将令牌存储到本地存储，因为现在，出于测试目的，我对令牌进行了硬编码。

标签： laravelapivue.js

解决方案

在你的 Login.vuescript

methods:{
        loginUser(){
                axios.post('/login',this.form).then(response =>{
                    localStorage.setItem('token', response.data.token) //store them from response
                    this.alerts = true
                this.$router.push({ name: 'Dashboard'})
            }).catch((errors) => {
                this.errors = errors.response.data.errors
            })
        },
}

在您登录的文件中，我们将其称为 Dashboard.vue in <script>，

data(){
      return {
          drawer: true,
          user: {roles: [0]},
          token: localStorage.getItem('token'), //get your local storage data
          isLoading: true,
      }
  },
methods: {
      getUser(){
        axios.get('/user').then(response => {
            this.currentUser = response.data
            this.user = this.currentUser.user 
        }).catch(errors => {
            if (errors.response.status === 401) {
                 localStorage.removeItem('token')
                 this.$router.push({ name: 'Login'})
            }
        }).finally(() => {
            setTimeout(function () {
                this.isLoading =  false
            }.bind(this), 1000);
        })
      },
  },

created(){
      axios.defaults.headers.common['Authorization'] = `Bearer ${this.token}` //include this in your created function
      this.getUser()  
      this.isCreated = true   
  }

我希望它对你有用

推荐阅读