laravel - 如何在 laravel 和 vue 中自动获取身份验证令牌?
问题描述
我在我的 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 ?
解决方案
好吧,您可以将令牌存储在 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>
推荐阅读
- pine-script - 如何在 pine-script 中绘制直到昨天的标签而不是当天的标签
- c++ - 在CMD中用MingW编译显示找不到libisl-21.dll
- c# - 包括哪些属性/字段(System.Text.Json.JsonSerializer)?
- python - 使用 Async Server Python 正确发送消息
- java - 来自 Word (*.docx) 的 mathml 格式方程及其使用 apache poi 的文本上下文
- excel - 用openpyxl重写数据解析
- android - exoplayer如何改善缓存和网络?
- html - HTML表格:将多行换行到新行
- apache-flink - 通过 Java API webui 提交 Flink 作业不显示日志
- git - 我是否有理由不应该在 OneDrive 中创建 git 存储库?