vue基于session和github-oauth2实现登录注册验证思路详解

更新时间：2024年08月27日 14:40:40 作者：Polar-Region

通过 sessionId 可以在 session 表中获取用户的信息,此外,还利用 session 表实现了GitHub 的 OAuth2 第三方登录,本文讲解前端通过简单的方式实现一个基本的登录注册验证功能,感兴趣的朋友跟随小编一起看看吧

本文简介

本文讲解前端通过简单的方式实现一个基本的登录注册验证功能。在后端，使用 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>

到此这篇关于vue基于session和github-oauth2实现登录注册验证的文章就介绍到这了,更多相关vue登录注册验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue管理系统项目中的一些核心技能汇总
Vue是当今增长最快的前端框架,Vue 平易近人、用途广泛且性能卓越,它的语法非常直观,并且具有友好的学习曲线,是开发人员最想学习的顶级前端库之一,下面这篇文章主要给大家介绍了关于vue管理系统项目中的一些核心技能,需要的朋友可以参考下
2022-05-05
Vue消息提示this.$message方法使用解读
这篇文章主要介绍了Vue消息提示this.$message方法使用,具有很好的参考价值,希望对大家有所帮助,
2023-09-09
详解vue中使用微信jssdk
这篇文章主要介绍了vue中使用微信jssdk，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue请求java服务端并返回数据代码实例
这篇文章主要介绍了Vue请求java服务端并返回数据代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11
Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)
这篇文章主要介绍了Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue中axios的二次封装实例讲解
在本篇文章里小编给大家整理了关于vue中axios的二次封装实例以及相关知识点总结，需要的朋友们可以学习下。
2019-10-10
vue watch监控对象的简单方法示例
这篇文章主要给大家介绍了关于vue watch监控对象的简单方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
在vue项目中使用Swiper插件详解
这篇文章主要介绍了在vue项目中使用Swiper插件详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue中render函数的使用方法
本篇文章主要介绍了Vue中render函数的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Vue滚动到指定位置的多种方式示例详解
当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域,怎么实现呢,下面小编给大家带来了多种方法实现Vue滚动到指定位置,感兴趣的朋友跟随小编一起看看吧
2023-08-08