Profile Settings middleware

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))
        }

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!

via Chebli Mohamed