vue篇-基于session和github-oauth2实现登录注册验证

Polar-Region

已于 2024-08-25 22:03:43 修改

阅读量434

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-08-25 22:01:27 首次发布

本文链接：https://blog.csdn.net/Polar_Region/article/details/141535947

版权

本文简介

本文讲解前端通过简单的方式实现一个基本的登录注册验证功能。在后端，使用 session 表来存储会话信息，并让前端的 localStorage 存储 sessionId。通过 sessionId 可以在 session 表中获取用户的信息。此外，还利用 session 表实现了 GitHub 的 OAuth2 第三方登录。

基本思路

在本项目中，我们使用 Vue 作为前端框架，通过与后端 API 交互来管理用户的会话状态。

用户注册和登录：用户在前端输入用户名和密码，通过表单提交到后端进行验证。成功登录后，后端返回一个 sessionId，前端将其存储在localStorage中。
会话管理：前端在每次请求时会在请求头中附带 sessionId，以便后端能够验证用户的身份。
第三方登录：用户点击GitHub登录按钮后，前端会重定向到GitHub的授权页面。用户授权后，GitHub重定向回我们的网站，并附带授权码。前端将授权码发送到后端服务器以换取访问令牌。

框架版本

Vue 3
Pinia (用于状态管理)
Vue Router (用于路由管理)
Axios (用于 HTTP 请求)
tailwind (用于css)
element-plus (用于css)

开源地址

后端地址：springboot-session-github-oauth
前端地址：vite-session-github-oauth

主要学习点

路由守卫

路由守卫确保只有经过身份验证的用户才能访问某些页面。

// 添加全局前置守卫
router.beforeEach(async (to, from, next) => {
    if (to.name == "Home") {
        const sessionId = ref("");
        const sessionIdFromUrl = to.query.sessionId as string;
        if (sessionIdFromUrl) {
            sessionId.value = sessionIdFromUrl;
            localStorage.setItem('sessionId', sessionIdFromUrl);
        } else if (localStorage.getItem('sessionId')) {
            sessionId.value = localStorage.getItem('sessionId') || '';
        }
        if (sessionId.value == '') {
            // 没有 sessionId，重定向到登录页面
            return next({ name: 'Login' });
        } else {
            try {
                // 验证 sessionId 是否有效
                const response = await axios.get('http://localhost:8080/auth/home', {
                    params: { sessionId: sessionId.value }
                });
                if (response.data && response.data.data) {
                    // 如果 username 存在，则 sessionId 有效
                    localStorage.setItem('username', response.data.data);
                    next();
                } else {
                    // 如果无效，清除 localStorage 并重定向到登录页面
                    localStorage.removeItem('sessionId');
                    next({ name: 'Login' });
                }
            } catch (error) {
                console.error('验证 sessionId 失败:', error);
                localStorage.removeItem('sessionId');
                next({ name: 'Login' });
            }
        }
    } else {
        // 如果目标路由是登录页面，直接继续导航
        next();
    }
});

代码设计

<script setup lang="ts">

import { ref } from 'vue';
import axios from 'axios';
import router from '../routes.ts';

const username = ref('');
const password = ref('');

const handleLogin = async () => {
  try {
    const response = await axios.post('http://localhost:8080/auth/login',{
      username: username.value,
      password: password.value
    });
    localStorage.setItem('sessionId', response.data.data);
    console.log(response.data.data);
    await router.push('/home');
  } catch (error) {
    console.log(error);
  }
}

const handleLoginByGithub = () => {
  window.location.href = 'http://localhost:8080/oauth/authorize';
}

</script>

<template>
  <div class="flex justify-center items-center min-h-screen bg-gray-2">
    <div class="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-lg">
      <h2 class="text-2xl font-bold text-center text-gray-800">
        客户端登录（session登录）
      </h2>
      <form class="space-y-6" @submit.prevent>
        <div>
          <label for="username" class="block text-sm font-medium text-gray-700">
            用户名
          </label>
          <input v-model="username" id="username" name="username" type="text" required
                 class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" />
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700">
            密码
          </label>
          <input v-model="password" id="password" name="password" type="password" required
                 class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" />
        </div>
        <div class="flex justify-end">
          <router-link to="/register">
            还没有账号，点击注册
          </router-link>
        </div>
        <div>
          <button type="submit"
                  class="w-full px-4 py-2 font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                  @click="handleLoginByGithub">
            使用GiHub登录
          </button>
        </div>
        <div>
          <button type="submit"
                  class="w-full px-4 py-2 font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                  @click="handleLogin">
            登录
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped></style>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import router from '../routes';

const username = ref('');
const password = ref('');

const handleRegister = async () => {
  try {
    const response = await axios.post('http://localhost:8080/auth/register', {
      username: username.value,
      password: password.value,
    });
    console.log(response.data);
    localStorage.setItem('sessionId', response.data.data);
    await router.push('/home');
  } catch (error) {
    console.log(error);
  }
};
</script>

<template>
  <div class="flex justify-center items-center min-h-screen bg-gray-100">
    <div class="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-lg">
      <h2 class="text-2xl font-bold text-center text-gray-800">
        客户端注册(session注册)
      </h2>
      <form class="space-y-6" @submit.prevent="handleRegister">
        <div>
          <label for="username" class="block text-sm font-medium text-gray-700">
            用户名
          </label>
          <input v-model="username" id="username" name="username" type="text" required
                 class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" />
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700">
            密码
          </label>
          <input v-model="password" id="password" name="password" type="password" required
                 class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" />
        </div>
        <div class="flex justify-end">
          <router-link to="/login">
            已有账号？点击登录
          </router-link>
        </div>
        <div>
          <button type="submit"
                  class="w-full px-4 py-2 font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                  @click.prevent="handleRegister">
            注册
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped></style>

Home.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import router from '../routes';
import { ElMessage } from 'element-plus';

const username = ref('');
const sessionId = ref('');
const state = ref('');

const showPasswordDialog = ref(false);
const newPassword = ref('');
const confirmPassword = ref(''); // New ref for confirming password

username.value = localStorage.getItem('username');
sessionId.value = localStorage.getItem('sessionId');
console.log(sessionId.value);

const handleState = async () => {
  try {
    const response = await axios.get('http://localhost:8080/user/state', {
      params: {
        sessionId: sessionId.value
      }
    });
    state.value = response.data.data;
  } catch (error) {
    console.log(error);
  }
};

const handleAddPassword = async () => {
  if (newPassword.value !== confirmPassword.value) {
    ElMessage.error('Passwords do not match');
    return;
  }

  try {
    const response = await axios.post('http://localhost:8080/user/addPassword', {
      password: newPassword.value
    }, {
      params: {
        sessionId: sessionId.value,
      }
    });
    console.log(response.data);
    if (response.data.status === 'OK') {
      ElMessage.success('Password added successfully');
      showPasswordDialog.value = false;
      newPassword.value = '';
      confirmPassword.value = ''; // Reset password fields
    } else {
      ElMessage.error('Failed to add password');
    }
  } catch (error) {
    console.log(error);
    ElMessage.error('An error occurred while adding the password');
  }
};

const handleLoginByGitHub = async () => {
  window.location.href = 'http://localhost:8082/oauth/authorize?sessionId=' + sessionId.value;
}

const handleLogout = async () => {
  try {
    const response = await axios.get('http://localhost:8080/auth/logout', {
      params: {
        sessionId: sessionId.value
      }
    });
    localStorage.removeItem('sessionId');
    sessionId.value = '';
    await router.push('/login');
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
};

// Execute on component mount
onMounted(() => {
  handleState();
});
</script>

<template>
  <div class="flex justify-center items-center min-h-screen bg-gray-2">
    <div class="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-lg">
      <h2 class="text-2xl font-bold text-center text-gray-800">
        使用Session登录成功
      </h2>
      <p class="text-center text-gray-600">
        欢迎回来, {{ username }}
      </p>
      <div v-if="state == 'password'" class="flex justify-end">
        <button
            class="px-4 py-2 font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            @click="showPasswordDialog = true">
          添加密码
        </button>
      </div>
      <div v-else-if="state == 'githubLoginName'" class="flex justify-end">
        <button
            class="px-4 py-2 font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            @click="handleLoginByGitHub">
          绑定github账号
        </button>
      </div>
      <div class="flex justify-end">
        <button
            class="px-4 py-2 font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            @click="handleLogout">
          退出
        </button>
      </div>
    </div>
  </div>

  <!-- Password Dialog -->
  <el-dialog v-model="showPasswordDialog" title="添加密码" width="500" draggable>
    <div class="space-y-4">
      <!-- New Password -->
      <div class="flex items-center space-x-4">
        <label for="newPassword" class="text-sm font-medium text-gray-700">
          输入密码
        </label>
        <input v-model="newPassword" id="newPassword" name="newPassword" type="password" required
               class="w-5/6 px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" />
      </div>

      <!-- Confirm Password -->
      <div class="flex items-center space-x-4">
        <label for="confirmPassword" class="text-sm font-medium text-gray-700">
          确认密码
        </label>
        <input v-model="confirmPassword" id="confirmPassword" name="confirmPassword" type="password" required
               class="w-5/6 px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="handleAddPassword">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<style scoped></style>