0

我在我的 laravel 和 vue.js 电子商务项目中使用 laravel 护照进行身份验证。

成功登录后，我想将用户重定向到他/她的仪表板。

这是Vue仪表板页面：

<template>
  <div class="content-center">
    <h1>Dashboard my account</h1>
    <p>
        {{userData.name}}
    </p>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  data() {
    return {
      userData: "",
      authToken: ""
    }
  },
  async beforeMount() {
    let res = await Axios.get("http://localhost:8000/api/user-details", {
      headers: {
        Authorization: "Bearer " + this.authToken, 
        Accept: 'application/json'
      },
       
    });
     this.userData = res.data;
     
    //  let token = await Axios.get("http://localhost:8000/api/user-login")
    //   this.authToken = res.data.data.auth_token
    //let res = await Axios.get("http://localhost:8000/api/user-details");
    
  },
};
</script>

每次登录不同的用户帐户时，我都必须从 Postman 手动复制和粘贴设置 authToken 的值。我想在用户登录时自动设置此令牌。我该怎么做？

这是我的 api 控制器：

class AuthApiController extends Controller
{
    public function userDetails(){
        return auth()->user();
    }
    public function login(Request $request){
            
        $user = User::where('email',$request->email)->first();
        if (!$user || !Hash::check($request->password, $user->password)) {
            return response()->json([
                'success'=>false,
                'data'=>[],
                'message'=>'Login failed',
                'errors'=>[]
            ]);
        }else{
            return response()->json([
                'success'=>true,
                'data'=>['user'=> $user, 'auth_token' =>  $user->createToken('AuthToken')->accessToken],
                'message'=>'Login success',
                'errors'=>[]
            ]);
           
        }
        
    }

更新：

仪表板.vue

<template>
  <div class="content-center">
    <h1>Dashboard my account</h1>
    <p>
        {{userData.name}}
    </p>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  data() {
    return {
      userData: "",
      authToken: ""
    }
  },
  async beforeMount() {
    let res = await Axios.get("http://localhost:8000/api/user-details", {
      headers: {
        Authorization: "Bearer " + this.authToken, 
        Accept: 'application/json'
      },
       
    });
     this.userData = res.data;
     
     let token = await $api.get("http://localhost:8000/api/user-login")
      this.authToken = res.data.data.auth_token
    
    
  },
};
</script>

图片：

在此处输入图像描述

我应该写什么来导入 api.js ？

从 ./../api.js 或 其他任何地方导入 $api ？

4

1 回答 1

1

好吧，您可以将令牌存储在 LocalStorage 中。每当您请求时，只需从本地存储中获取它并将其传递给请求标头。

如果您使用的是 Axios，那么您可以使用interceptors并拦截您的每个请求并在标头中传递令牌。

步骤1。

创建一个名为的文件，api.js或者您可以随意调用它。

第2步。

api.js在文件中创建一个 Axios 实例。

import axios from 'axios';

// Put your backend url here
export const API_URL = `http://localhost:5000/api`

const $api = axios.create({
    withCredentials: true,
    baseURL: API_URL
})

$api.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
    return config;
})


export default $api;

第 3 步：无论你在哪里使用 Axios，都使用这个导出的实例，所以在你的组件中你会这样做：

const userdata = await $api.get("http://localhost:8000/api/user-details");

在这里你可以看到，我们使用的是$api我们在api.js文件中创建的 Axios 实例，而不是Axios直接的。

添加时，不要忘记将令牌存储在本地存储中。

localStorage.setItem('token', "Your token goes here...");

我希望这会给你一个想法。

这样，如果 Token 存在于 localStorage 中，它将自动随每个请求一起发送。

更新：

<template>
  <div class="content-center">
    <h1>Dashboard my account</h1>
    <p>
        {{userData.name}}
    </p>
  </div>
</template>
<script>
// import Axios from "axios";
   import $api from 'put relative path of your api.js file'

export default {
  data() {
    return {
      userData: "",
      authToken: ""
    }
  },
  async beforeMount() {
    let res = await $api.get("/user-details");
     this.userData = res.data;
     
     let res = await $api.get("/user-login")
      localStorage.setItem('token', res.data.data.auth_token);        
  },
};
</script>
于 2021-08-28T17:55:00.723 回答