Level 21
I'd save the token to the local storage when the user logins and loads the page for the first time. Thereafter I will retrieve the token and pass it to axios on the subsequent API request.
1 like
Mar 15, 2019
5
Level 8
Accessing Token Based API Route via Vue/Axios
I would like to use the basic token API authentication in Laravel; no real need to set up Laravel Passport just for this request.
I have an API route set up to fetch the user's school i.e.
routes/api.php
Route::middleware('auth:api')->get('/user/school', function (Request $request) {
return $request->user()->school;
});
I have a Vue component set up with an axios request to get the user's school, passing the token as a prop to the component then accessing through axios' params.
Vue Component
axios.get('/api/user/school', {
params: {
'api_token': this.token,
}
}).then(response => (this.school = response.data))
What would be the best method for passing the api_token to the Vue component to access this data?
Should I just add it as a prop to the component in the blade file and pass it through that way as I have been? i.e.
Blade File
<user-school token={{ auth()->user()->api_token }}></user-school>
Level 122
How is the token benefitting you in any way here?
If the token is shared in the html, you might as well just have no access control? If the token is unique per user and is only shared with the view once the user is logged in when why not just use sessions?
Level 8
@SNAPEY - Since I'm not displaying the token in the vue template I don't think the token is actually visible in the rendered HTML.
All I really want to achieve is to pull some data from the database through Vue, but not have to have this accessible by browsing to the URL. This seemed the simplest approach without having a web route.
Level 122
Vue runs in the browser. All is visible in the html / javascript.
Level 2
I couldn't understand what you wanted to do with that config but you can use something like following
axios.get('/api/user/school',)
.then(response => () {
localStorage.setItem("token", response.data.token)
})
After store the token in localstorage, you can use it to route.
Please or to participate in this conversation.