i have created this login system with laravel's cusotm authorization, the backend part alone works as i have used the same method with no frontend before without issues, but now that i have tried it with vue it gives me request failed with 422 unprocessable content error.

my controller :

public function loginn(Request $request){
   $request->validate([
    'name' => 'required',
    'password' => 'required',
   ]);
    $credentials = $request->only('name', 'password');
    if (Auth::attempt($credentials)) {
        // Authentication passed...
        return response()->json([
            'message' => 'login successfull',
        ]);
    }
    else{
        return response()->json([
            'message' => 'login failed',
        ]);
    }
 }

api page:

Route::post('/login', [control::class, 'loginn']);

my frontend:

<template>
    <v-app id="inspire">
       <v-content>
          <v-container fluid fill-height>
             <v-layout align-center justify-center>
                <v-flex xs12 sm8 md4>
                   <v-card >
                      <v-toolbar dark color="black">
                         <v-toolbar-title>Login form</v-toolbar-title>
                      </v-toolbar>
                      <v-card-text>
                         <v-form>
                            <v-text-field
                               prepend-icon="mdi-account"
                               name="name"
                               label="name"
                               type="text"
                            ></v-text-field>
                            <v-text-field
                               id="password"
                               prepend-icon="mdi-lock"
                               name="password"
                               label="Password"
                               type="password"
                            ></v-text-field>
                         </v-form>
                      </v-card-text>
                      <v-card-actions >
                         <v-spacer></v-spacer>
                         <div >
                         <v-btn color="yellow" @click=login >Login</v-btn>
                        </div>
                      </v-card-actions>
        
                   </v-card>
                </v-flex>
             </v-layout>
          </v-container>
       </v-content>
    </v-app>
 </template>
 <script>
   import axios from 'axios';
   export default{
       data: () => ({
          name: '',
          password: ''
       }),
       methods: {
         async login(){
                try {
                    await axios.post('http://127.0.0.1:8000/api/login',
                    {
                        name: this.name,
                        password: this.password,
                      
                     });
                        this.$router.push('/');
                    
                } catch (error) {
                    console.log(error);
                }
            }}
       
   }
 </script>

CodePudding user response：

Use laravel passport to authorize with api. With the help of laravel passport you generate a token and pass this token for authorization on the header

CodePudding user response：

you are missing to manstion status code like this:

   ## The authentication token is configured in Hadder.
        <pre><code>axios.defaults.headers.common['Authorization'] = `Bearer${access_token}</code></pre>
   ## in laravel api
            <pre><code>return response()->json([
                        'message' => 'login successfull',
                    ],200); </code></pre>
                
 ```if any error has genrated so you can fatch like that:```
<pre><code> await axios.post('http://127.0.0.1:8000/api/login',
                                {
                                    name: this.name,
                                    password: this.password, 
                                 })
            .then(resp=>(){
              console.warn(resp)
            this.$router.push('/');
            })
            .catch(e=>(){
            console.warn(e)
            }); </code></pre>