基于REST的Laravel-Vue JS登录

Question

我用laravel的cusotm授权创建了这个登录系统，后端部分单独工作，因为我使用了相同的方法，以前没有任何问题，但是现在我已经尝试了vue，它给我的请求失败了422个不可处理的内容错误。

我的控制器：

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页面：

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

我的前额：

<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 class="elevation-12">
                      <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 class="align-items-center">
                         <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>

Answer 1

使用laravel护照与api授权。在拉拉护照的帮助下，您将生成一个令牌，并将此令牌传递给标题上的授权。