首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue登录注册验证

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

2024-08-27 14:40:41 作者：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登录注册验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！