Cara membina sistem pengesahan pengguna yang selamat menggunakan PHP dan Vue.js

Cara membina sistem pengesahan pengguna yang selamat menggunakan PHP dan Vue.js

Pengenalan:
Dengan populariti dan perkembangan Internet, sistem pengesahan pengguna telah menjadi bahagian yang amat diperlukan dalam pembangunan web. Sistem pengesahan pengguna yang selamat dan boleh dipercayai boleh melindungi privasi pengguna, menghalang log masuk haram dan memastikan bahawa hanya pengguna yang diberi kuasa boleh mengakses maklumat sensitif. Artikel ini akan memperkenalkan cara membina sistem pengesahan pengguna yang selamat dan boleh dipercayai menggunakan PHP dan Vue.js.

1. Bina API bahagian belakang
   Pertama, kita perlu membina API bahagian belakang menggunakan PHP, yang bertanggungjawab untuk mengendalikan pendaftaran pengguna, log masuk dan pengesahan. Berikut ialah contoh mudah:

   // 注册新用户的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);
   }

   Dalam contoh di atas, kami menggunakan ORM Eloquent rangka kerja Laravel untuk mengendalikan operasi pangkalan data dan Pasport untuk menjana token akses selamat.

2. Buat bahagian hadapan Vue.js
   Seterusnya, gunakan Vue.js di bahagian hadapan untuk membina antara muka pengguna. Berikut ialah contoh komponen log masuk dan pendaftaran yang mudah:

   <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>

   Dalam contoh di atas, kami menggunakan perpustakaan axios untuk menghantar permintaan HTTP dan localStorage untuk menyimpan token akses.

3. Sambungkan bahagian hadapan dan belakang
   Akhir sekali, kita perlu menyambung bahagian hadapan dan belakang. Pastikan anda menambah kod berikut dalam fail titik masuk aplikasi Vue.js anda (cth. 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');

   Dalam contoh di atas, kami menetapkan URL asas lalai axios dan pengepala HTTP lalai untuk menambah token akses secara automatik pada setiap Kad permintaan .

Kesimpulan:
Dengan menggunakan PHP untuk membina API bahagian belakang dan Vue.js untuk membina UI bahagian hadapan, kami boleh membina sistem pengesahan pengguna yang selamat dan boleh dipercayai. Sistem ini melindungi privasi pengguna, menghalang log masuk haram dan memastikan bahawa hanya pengguna yang dibenarkan boleh mengakses maklumat sensitif. Pada masa yang sama, kami juga boleh mengembangkan antara muka pengguna mengikut keperluan untuk melaksanakan fungsi yang lebih kompleks, seperti penetapan semula kata laluan, pengesahan dua faktor, dsb. Saya harap artikel ini membantu anda memahami cara membina sistem pengesahan pengguna yang selamat menggunakan PHP dan Vue.js.

Atas ialah kandungan terperinci Cara membina sistem pengesahan pengguna yang selamat menggunakan PHP dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!