实战：使用 Lumen 和 Vue 构建个人清单应用（二）——拥抱敏捷开发体系，拥抱简便安全

2023-12-22 21:42:21

实战：使用 Lumen 和 Vue 构建个人清单应用（二）——拥抱敏捷开发体系，拥抱简便安全 #

大家好，我是[你的名字]，一位充满激情的前端工程师。今天，我将继续带领大家深入学习如何使用 Lumen 和 Vue.js 构建一个功能齐全的个人清单应用。在上一篇文章中，我们已经完成了应用的基本框架搭建，现在，我们将迈出激动人心的下一步——添加 JWT 认证和 RESTful API 接口规范。

首先，我们需要了解为什么我们需要 JWT 认证和 RESTful API。

JWT 认证 是一种现代且安全的认证方式，它可以帮助我们轻松构建和管理用户认证系统。JWT 是一个 JSON 格式的令牌，包含了用户的信息和签名，可以帮助我们验证用户身份并授予相应的权限。

RESTful API 是一种设计风格，它可以帮助我们构建易于理解和使用的 API。RESTful API 使用统一的资源标识符 (URI) 来标识资源，并使用标准的 HTTP 方法 (GET、POST、PUT、DELETE) 来操作这些资源。

添加 JWT 认证和 RESTful API 接口规范可以使我们的应用更加安全、易于使用和维护。

好了，让我们开始吧！

1. 安装必要的依赖项

首先，我们需要安装必要的依赖项。

composer require tymon/jwt-auth

2. 配置 JWT 认证

接下来，我们需要配置 JWT 认证。

// .env
JWT_SECRET=supersecretkey

// config/auth.php
'defaults' => [
    'guard' => 'api',
    'passwords' => 'users',
],

'guards' => [
    'api' => [
        'driver' => 'jwt',
        'provider' => 'users',
    ],
],

'providers' => [
    'users' => [
        'driver' => 'eloquent',
        'model' => App\User::class,
    ],
],

3. 创建 API 路由

接下来，我们需要创建 API 路由。

// routes/api.php
Route::group(['middleware' => 'auth:api'], function () {
    Route::get('/user', function () {
        return auth()->user();
    });
});

4. 创建 Vue.js 组件

接下来，我们需要创建 Vue.js 组件。

// resources/js/components/App.vue
<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

// resources/js/components/Login.vue
<template>
    <div>
        <form>
            <input type="email" v-model="email" placeholder="Email">
            <input type="password" v-model="password" placeholder="Password">
            <button @click="login">Login</button>
        </form>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            email: '',
            password: ''
        }
    },
    methods: {
        login() {
            axios.post('/api/login', {
                email: this.email,
                password: this.password
            }).then(response => {
                localStorage.setItem('token', response.data.token);
                this.$router.push('/');
            }).catch(error => {
                console.log(error);
            });
        }
    }
}
</script>

// resources/js/components/Home.vue
<template>
    <div>
        <h1>Home</h1>
        <p>Welcome, {{ user.name }}</p>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            user: {}
        }
    },
    created() {
        axios.get('/api/user').then(response => {
            this.user = response.data;
        }).catch(error => {
            console.log(error);
        });
    }
}
</script>

5. 创建 Vue.js 路由

接下来，我们需要创建 Vue.js 路由。

// resources/js/router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from './components/Login.vue';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path: '/login',
            component: Login
        },
        {
            path: '/',
            component: Home
        }
    ]
});

export default router;