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

原创

已于 2024-08-25 22:03:43 修改 · 639 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

本文简介

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