Profile Settings middleware - php

Question

I have a user profile page and user profile/settings page
the problem is I made a middleware for settings page to prevent any auth user from entering other users settings page or update them Unless the ID OR SLUG IS MATCHED to the auth user but I'm using Vue whenever I use the API routes to fetch or update the data it says unauthorized 401 or 500.
middleware :
public function handle($request, Closure $next)
{
if ($request->slug != auth()->user()->slug) {
return redirect()->to('/');
}
return $next($request);
}
API route :
Route::get('/profile/{slug}','ProfilePrivateController#show')->middleware('editProfile');;
VueJs :
update(){
axios.put(`/api/profile/${this.id}`,{
email : this.email,
username : this.name,
password : this.password,
education_level : this.education_level,
fb_url : this.fb_url,
twitter_url : this.twitter_url,
field : this.field
})
.then(res=>console.log(res))
}
Controller :
public function show($slug)
{
$user = User::findBySlugOrFail($slug);
return response()->json($user);
}
public function update(Request $request, $slug)
{
$user = User::findBySlug($slug);
$user->update([
'email'=>$request->email,
'education_level'=>$request->education_level,
'field'=>$request->field,
'school'=>$request->school,
'fb_url'=>$request->fb_url,
'twitter_url'=>$request->twitter_url,
]);
if($request->has('password')){
$user->save([
'password'=>$request->password
]);
}
return response()->json('user updated',200);
}
I Want to let the user update his settings and secure the API at the same time.
I'm really lost at this point Any help is appreciated!

Answer 1

You have a GET request for the API route, but using a PUT request in Vue.
Updating Route::get to Route::put should solve the problem.
Also, since its an AJAX request, you should be returning a JSON response so it can easily be consumed. You can return something similar to:
return response()->json(['error' => 'unauthorized'], 401);