使用 Laravel Passport 设置 API - 为什么会出现未经授权的错误？

Question

I am following along with a tutorial on building Laravel and Vue JS web apps, and I have a question:

I am trying to build an api using Laravel Passport, and I am getting the following errors:

Failed to load resource: the server responded with a status of 401 (Unauthorized)
app.js:699 Uncaught (in promise) Error: Request failed with status code 401
    at createError (app.js:699)
    at settle (app.js:960)
    at XMLHttpRequest.handleLoad (app.js:168)

I just wondered why these errors might be occuring? I have run the following commands: 'composer require laravel/passport' php artisan migrate php artisan passport install

User.php

    class User extends Authenticatable
{
    use Notifiable, HasApiTokens;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

config/auth.php

    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
            'hash' => false,
        ],
    ],

routes.php

    Route::post('/categories/upsert', 'CategoryController@upsert');

index.blade.php

    <template>
    <form>
        <a @click="addCategory" class="add">+ Add Category</a>
        <div v-for="(category, index) in categories" :key="category.id">
            <input type="text" v-model="category.name"> {{/* inputs will use two way binding with v-model */}}
            <input type="number" v-model="category.display_order">
            <a @click="removeCategory(index)" class="remove">delete</a>
            <div>
                <img v-if="category.image" :src="` /images/${category.image}`" width="100">
                <label v-else>Image: </label>
                <input type="text" v-model.lazy="category.image">
            </div>
            <hr>
        </div>
    </form>
</template>

    <script>
        export default {
            props: ['initialCategories'],
            data() {
                return {
                    categories: _.cloneDeep(this.initialCategories) /* Cloned to avoid mutating the prop */
                };
            },
            created() {
                axios.post('/api/categories/upsert');
            },
            methods: {
                removeCategory(index) {
                    if (confirm('Are you sure?')){
                        this.categories.splice(index, 1);
                    }
                },
                addCategory() {
                    this.categories.push({
                        id: 0,
                        name: '',
                        image: '',
                        display_order: this.categories.length + 1
                    });
                    this.nextTick(() => {
                        window.scrollTo(0, document.body.scrollHeight);
                        this.$refs[''][0].focus();
                    });
                }
    
            }
        }
    </script>

Please let me know if anyone has any ideas. I have tried clearing the configuration cache and including a csrf token. Thanks,

Robert London, UK

Answer 1

You should run artisan command: php artisan passport:install

Answer 2

Make sure to: Add \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class, to you Kernel file under $middlewareGroups.

Add Passport::routes(); to AuthServiceProvider, under boot function.

in routes/api.php, group your routes under

Route::middleware('auth:api')->group(function () {    

 //Routes here      

 });