How to build a secure user authentication system using PHP and Vue.js

How to use PHP and Vue.js to build a secure user authentication system

Introduction:
With the popularity and development of the Internet, the user authentication system has become an indispensable part of Web development . A secure and reliable user authentication system can protect user privacy, prevent illegal logins, and ensure that only authorized users can access sensitive information. This article will introduce how to use PHP and Vue.js to build a safe and reliable user authentication system.

1. Build a backend API
   First, we need to build a backend API using PHP, which is responsible for handling user registration, login and authentication. The following is a simple example:

   // 注册新用户的API
   public function register(Request $request) {
    // 检查用户名是否已经存在
    if(User::where('username', $request->username)->exists()) {
        return response()->json(['error' => 'Username already exists'], 400);
    }
   
    // 创建新用户
    $user = new User;
    $user->username = $request->username;
    $user->password = bcrypt($request->password);
    $user->save();
   
    return response()->json(['success' => true], 200);
   }
   
   // 用户登录的API
   public function login(Request $request) {
    // 验证用户名和密码
    $credentials = $request->only('username', 'password');
    if(Auth::attempt($credentials)) {
        // 验证成功
        $user = Auth::user();
        $token = $user->createToken('authToken')->accessToken;
        return response()->json(['access_token' => $token], 200);
    } else {
        // 验证失败
        return response()->json(['error' => 'Invalid login credentials'], 401);
    }
   }
   
   // 验证用户身份的API
   public function authenticate() {
    return response()->json(['success' => true], 200);
   }

   In the above example, we use the Eloquent ORM of the Laravel framework to handle database operations and Passport to generate a secure access token.

2. Create Vue.js front end
   Next, use Vue.js on the front end to build the user interface. The following is a simple login and registration component example:

   <template>
     <div>
    <form v-if="showLoginForm" @submit.prevent="login">
      <input type="text" v-model="loginForm.username" placeholder="Username">
      <input type="password" v-model="loginForm.password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
    <form v-else @submit.prevent="register">
      <input type="text" v-model="registerForm.username" placeholder="Username">
      <input type="password" v-model="registerForm.password" placeholder="Password">
      <button type="submit">Register</button>
    </form>
    <button @click="toggleForm">
      {{ showLoginForm ? 'Register' : 'Login' }}
    </button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      showLoginForm: true,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: ''
      }
    };
     },
     methods: {
    toggleForm() {
      this.showLoginForm = !this.showLoginForm;
    },
    login() {
      // 发送登录请求到后端API
      axios.post('/api/login', this.loginForm)
        .then(response => {
          // 保存访问令牌到本地存储
          localStorage.setItem('accessToken', response.data.access_token);
          // 在每个后续请求的HTTP头中附加令牌
          axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.access_token}`;
          // 执行身份验证
          this.authenticate();
        })
        .catch(error => {
          console.error(error);
        });
    },
    register() {
      // 发送注册请求到后端API
      axios.post('/api/register', this.registerForm)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.error(error);
        });
    },
    authenticate() {
      // 对后端进行身份验证
      axios.get('/api/authenticate')
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.error(error);
        });
    }
     },
     mounted() {}
   };
   </script>

   In the above example, we use the axios library to send HTTP requests and localStorage to save the access token.

3. Connect the front-end and back-end
   Finally, we need to connect the front-end and back-end. Make sure to add the following code in your Vue.js application's entry point file (e.g. main.js):

   import axios from 'axios';
   
   axios.defaults.baseURL = 'http://localhost:8000'; // 替换为你的后端API的URL
   axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`;
   
   new Vue({
     // ...
   }).$mount('#app');

   In the above example, we set the default base URL and default HTTP for axios header so that the access token is automatically added to every request.

Conclusion:
By using PHP to build the back-end API and Vue.js to build the front-end user interface, we can build a safe and reliable user authentication system. This system protects user privacy, prevents illegal logins, and ensures that only authorized users can access sensitive information. At the same time, we can also expand the user interface according to needs to implement more complex functions, such as password reset, two-factor authentication, etc. I hope this article helps you understand how to build a secure user authentication system using PHP and Vue.js.

The above is the detailed content of How to build a secure user authentication system using PHP and Vue.js. For more information, please follow other related articles on the PHP Chinese website!