【springboot+vue项目(十五)】基于Oauth2的SSO单点登录(二)vue-element-admin框架改造整合Oauth2.0

Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统框架,提供了丰富的组件和功能,可以帮助开发者快速搭建现代化的后台管理系统。

一、基本知识

(一)Vue-element-admin 的主要文件和目录

vue-element-admin/
  |-- build/                          # 构建相关配置文件
  |    |-- build.js                   # 生产环境构建脚本
  |    |-- check-versions.js          # 检查 Node.js 和 npm 版本的脚本
  |    |-- logo.png                   # 构建 Logo
  |    |-- utils.js                   # 构建工具函数
  |    |-- vue-loader.conf.js         # Vue loader 配置
  |    |-- webpack.base.conf.js       # webpack 基础配置
  |    |-- webpack.dev.conf.js        # webpack 开发环境配置
  |    |-- webpack.prod.conf.js       # webpack 生产环境配置
  |
  |-- config/                         # 项目配置
  |    |-- dev.env.js                 # 开发环境变量配置
  |    |-- index.js                   # 项目配置文件
  |    |-- prod.env.js                # 生产环境变量配置
  |
  |-- src/                            # 源代码
  |    |-- api/                       # 接口请求相关
  |    |-- assets/                    # 静态资源
  |    |-- components/                # 全局公用组件
  |    |-- directive/                 # 自定义指令
  |    |-- icons/                     # 图标
  |    |-- layout/                    # 全局布局
  |    |-- router/                    # 路由配置
  |    |-- store/                     # 全局状态管理
  |    |-- styles/                    # 全局样式
  |    |-- utils/                     # 工具函数
  |    |-- views/                     # 页面组件
  |    |-- App.vue                    # 入口页面
  |    |-- main.js                    # 入口 JS 文件

  |    |-- permission.js           # 路由守卫 文件
  |
  |-- static/                         # 静态资源
  |
  |-- .babelrc                        # Babel 配置
  |-- .editorconfig                   # 编辑器配置
  |-- .eslintignore                   # ESLint 忽略文件配置
  |-- .eslintrc.js                    # ESLint 配置
  |-- .gitignore                      # Git 忽略文件配置
  |-- index.html                      # 入口 HTML 文件
  |-- package.json                    # 项目信息和依赖配置
  |-- README.md                       # 项目说明文档
  |-- vue.config.js                   # Vue CLI 配置 

(二)单点登录系统涉及的文件和概念

  1. 客户端ID和客户端密钥:前端应用和后端应用在与单点登录系统通信时,需要提供客户端ID和客户端密钥进行身份验证。
  2. 授权码(authorization code):单点登录系统验证用户身份成功后生成的一次性授权码,用于换取访问令牌和刷新令牌。
  3. 访问令牌(access token):单点登录系统验证成功后返回给前端应用的令牌,用于后续请求时进行身份验证。
  4. 刷新令牌(refresh token):单点登录系统验证成功后返回给前端应用的令牌,用于在访问令牌过期时更新访问令牌。
  5. 前端应用使用的SDK或库文件:前端应用需要集成相应的SDK或库文件以便与单点登录系统进行通信。
  6. 单点登录系统的API文档:开发人员需要根据API文档了解单点登录系统提供的接口和参数,以便正确调用API接口。

二、 前端实现单点登录的基本流程

设计思路:为了避免code和access_token的泄露,所以大部分的和单点登录系统(统一认证)的交互都放到后端进行,前端尽可能的复用原来的代码,进行小的改动。整体思路如下:

1、登录页面--login.vue(修改原login.vue):用户访问前端应用,前端应用将用户重定向到后端登录接口。

<template><div class="login-container"><div>正在重定向到登录页面...</div></div>
</template><script>
export default {created() {const baseUrl = process.env.VUE_APP_BASE_API;//重定向到后端的SSOlogin/login接口window.location.href = `${baseUrl}/SSOlogin/login`;},
};
</script><style scoped>
.login-container {display: flex;justify-content: center;align-items: center;height: 100vh;text-align: center;
}
</style>

2、 响应页面--callback.vue(新建):检查后端返回的URL+token访问链接中是否存在后端返回的token,如果存在则调用登录函数user/login进行前端的登录操作(调用login函数进行前端的登录,目的是将token持久化和存储到VUEX中,尽可能少的改动原来的代码。),并根据登录结果进行不同的处理。如果没有获取到token,则输出错误信息并终止后续逻辑。

<template><div><h1>Loading...</h1></div>
</template><script>
export default {name: "Callback",data() {return {};},created() {// 获取 URL 查询参数中的授权码const token = this.$route.query.token;// 利用后端传递的token,调用login函数进行前端的登录,目的是将token持久化和存储到VUEX中,尽可能少的改动原来的代码if (token) {this.loading = true;this.$store.dispatch("user/login",token).then(() => {// 登录成功,路由跳转this.$router.push({ path: this.redirect || "/" });this.loading = false;}).catch(() => {this.loading = false;});} else {console.log("error submit!!");return false;}},
};
</script>

 对应的store/user.js。

3、 数据仓库 store/user.js,修改一下原来的Login函数即可。

原Login函数为:

//这里在处理登录业务async login({ commit }, userInfo) {//解构出用户名与密码const { username, password } = userInfo;let result = await login({ username: username.trim(), password: password });if(result.code==200){//vuex存储tokencommit('SET_TOKEN',result.data.token);//本地持久化存储tokensetToken(result.data.token);return 'ok';}else{return Promise.reject(new Error('faile'));}},

 修改后的Login为:

 // 登录 actionasync login({ commit }, token) {try {// 设置 token 持久化commit('SET_TOKEN', token);// 将 token 值保存在浏览器的本地存储中setToken(token);// 可以根据需要返回其他数据或状态return "ok";} catch (error) {// 异常时返回一个被拒绝的 Promise 对象return Promise.reject(error);}},

 所以,修改login函数,去掉了使用用户名和密码发送请求到后端接口验证登录,完整的代码如下:

// 引入需要使用的函数和模块
import { getInfo, logout  } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'// 定义获取默认状态的函数
const getDefaultState = () => {return {token: getToken(), // 使用 getToken 函数获取 token 值name: '',avatar: ''}
}// 定义 Vuex 模块的状态
const state = getDefaultState()// 定义 Vuex 模块的变更操作
const mutations = {// 重置状态为默认状态RESET_STATE: (state) => {Object.assign(state, getDefaultState())},// 设置 tokenSET_TOKEN: (state, token) => {state.token = token},// 设置用户名SET_NAME: (state, name) => {state.name = name},// 设置用户头像SET_AVATAR: (state, avatar) => {state.avatar = avatar}
}// 定义 Vuex 模块的异步操作
const actions = {// 用户登录// 登录 actionasync login({ commit }, token) {try {// 设置 tokencommit('SET_TOKEN', token);// 将 token 值保存在浏览器的本地存储中setToken(token);// 可以根据需要返回其他数据或状态return "ok";} catch (error) {// 异常时返回一个被拒绝的 Promise 对象return Promise.reject(error);}},async getInfo({ commit, state }) {try {// 发送请求获取用户信息const response = await getInfo(state.token)// 如果响应数据不存在,说明验证失败if (!response.data) {throw new Error('验证失败,请重新登录。')}// 获取用户名和头像const { name, avatar } = response.data// 设置用户名commit('SET_NAME', name)// 设置用户头像commit('SET_AVATAR', avatar)// 返回完整的响应对象return response} catch (error) {return Promise.reject(error)}},// 用户注销async logout({ commit, state }) {try {// 发送请求注销用户登录状态await logout(state.token)// 从本地存储中删除 tokenremoveToken()// 重置路由resetRouter()// 重置状态commit('RESET_STATE')} catch (error) {return Promise.reject(error)}},// 重置 token 值async resetToken({ commit }) {try {// 从本地存储中删除 tokenremoveToken()// 重置状态commit('RESET_STATE')} catch (error) {return Promise.reject(error)}}
}// 导出 Vuex 模块
export default {namespaced: true, // 开启命名空间state,mutations,actions
}

4、  数据仓库store/user.js引入的函数和模块

 为了更清晰的了解整个过程,将上面store/user.js引入的函数和模块也贴在下面即:

因为 store/user.js中不用再向后端发请求,所以api/user.js中就可以把login删掉了。

api/user.js 

//api/user.js
import request from '@/api/request/request'export function getInfo(token) {return request({url: '/user/getInfo',method: 'get',params: { token }})
}export function logout() {return request({url: '/user/logout',method: 'post'})
}

utils/auth.js:用于处理用户身份验证 token 的工具函数,主要涉及对浏览器 Cookie 的操作。getToken:获取用户的身份验证 token,setToken:设置用户的身份验证 token,removeToken:移除用户的身份验证 token。

//utils/auth.js
import Cookies from 'js-cookie'const TokenKey = 'vue_admin_template_token'export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {return Cookies.remove(TokenKey)
}

5、路由守卫--permission.js:修改原来的)在每次路由导航之前进行身份验证和权限控制,确保用户在正确的身份状态下访问页面,并在页面切换后完成进度条的展示。

        如果用户已登录且获取了用户信息,则直接跳转到目标页面;

        如果用户未登录或获取用户信息失败,则跳转至登录页。

        同时,白名单内的页面可以在未登录状态下直接访问。

修改:配置白名单,把callback加进去

注意:通过 user/getInfo 获取用户信息  await  store.dispatch('user/getInfo'),所以api/user.js 里面要有getInfo函数。

 permission.js 完整的代码如下:

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // 引入进度条库
import 'nprogress/nprogress.css' // 引入进度条样式
import { getToken } from '@/utils/auth' // 引入获取 token 的方法
import getPageTitle from '@/utils/get-page-title' // 引入获取页面标题的方法NProgress.configure({ showSpinner: false }) // 配置进度条const whiteList = ['/login','/callback'] // 定义无需登录即可访问的白名单路由router.beforeEach(async(to, from, next) => {NProgress.start() // 开始进度条document.title = getPageTitle(to.meta.title) // 设置页面标题const hasToken = getToken() // 获取 tokenif (hasToken) {if (to.path === '/login') {// 如果已登录却访问登录页,则重定向到首页next({ path: '/' })NProgress.done() // 完成进度条} else {const hasGetUserInfo = store.getters.name // 判断是否已获取用户信息if (hasGetUserInfo) {// 如果已获取,则直接进入路由next()} else {try {// 如果未获取,则通过 user/getInfo 获取用户信息await store.dispatch('user/getInfo')console.log("获取用户信息")next()} catch (error) {// 如果获取用户信息失败,则重置 token 并跳转至登录页await store.dispatch('user/resetToken')Message.error(error || 'Has Error')next(`/login?redirect=${to.path}`)// window.location.href = `www.baidu.com`;NProgress.done()}}}} else {if (whiteList.indexOf(to.path) !== -1) {// 如果在白名单中,则直接进入路由next()} else {// 否则跳转至登录页next(`/login?redirect=${to.path}`)NProgress.done()}}
})router.afterEach(() => {NProgress.done() // 完成进度条
})

6、请求拦截器中添加token到请求头:和原来一样)在请求拦截器中,从cookie中获取token,并将其添加到请求的头信息中,这样可以确保每次请求都带上了token。

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'// 创建一个axios实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,  // 接口的基础路径timeout: 5000 // 请求超时时间
})// 请求拦截器
service.interceptors.request.use(config => {// 在请求发送前做一些处理if (store.getters.token) {// 如果有token就在请求头中加上tokenconfig.headers['token'] = getToken()}return config},error => {// 对请求错误做些什么console.log(error)return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {// 对响应数据做一些处理,这里只返回响应数据中的data部分const res = response.data// 如果自定义的响应码不是20000,就判断为错误if (res.code !== 20000 && res.code !== 200) {// 在页面上显示错误信息Message({message: res.message || 'Error',type: 'error',duration: 5 * 1000})if (res.code === 50008 || res.code === 50012 || res.code === 50014) {// 重新登录MessageBox.confirm('您已经登出,您可以取消以留在此页面,或重新登录', '确认登出', {confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning'}).then(() => {store.dispatch('user/resetToken').then(() => {location.reload()})})}// 返回一个被拒绝的Promise对象,用来表示错误return Promise.reject(new Error(res.message || 'Error'))} else {// 如果没有错误,就返回响应数据中的data部分return res}},error => {// 对响应错误做些什么console.log('err' + error)Message({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

7、获取用户信息并渲染页面:在需要展示用户信息的地方,从cookie中获取用户信息,并将其渲染到页面上。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/260227.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人工智能_普通服务器CPU_安装清华开源人工智能AI大模型ChatGlm-6B_001---人工智能工作笔记0096

使用centos安装,注意安装之前,保证系统可以联网,然后执行yum update 先去更新一下系统,可以省掉很多麻烦 20240219_150031 这里我们使用centos系统吧,使用习惯了. ChatGlm首先需要一台个人计算机,或者服务器, 要的算力,训练最多,微调次之,推理需要算力最少 其实很多都支持C…

stable diffusion webui学习总结(2):技巧汇总

一、脸部修复&#xff1a;解决在低分辨率下&#xff0c;脸部生成异常的问题 勾选ADetailer&#xff0c;会在生成图片后&#xff0c;用更高的分辨率&#xff0c;对于脸部重新生成一遍 二、高清放大&#xff1a;低分辨率照片提升到高分辨率&#xff0c;并丰富内容细节 1、先通过…

【LeetCode】树的BFS(层序遍历)精选6题

目录 1. N 叉树的层序遍历&#xff08;中等&#xff09; 2. 二叉树的锯齿形层序遍历&#xff08;中等&#xff09; 3. 二叉树的最大宽度&#xff08;中等&#xff09; 4. 在每个树行中找最大值&#xff08;中等&#xff09; 5. 找树左下角的值&#xff08;中等&#xff09…

票务系统平台架构设计与实现

票务系统是一个复杂的平台&#xff0c;涉及到用户购票、票务管理、支付结算等多方面功能。本文将介绍票务系统平台的架构设计原则、技术选型以及实现过程&#xff0c;帮助读者了解如何构建一个高效、稳定的票务系统。 正文&#xff1a; 1. 系统设计原则 在设计票务系统平台时…

【计算机网络】网络基础

初识网络 一、网络发展二、认识协议三、认识网络协议1. 协议分层2. OSI 七层模型3. TCP/IP五层模型4. OS和网络协议栈 四、网络传输基本流程1. TCP/IP 协议通讯过程2. 以太网通信&#xff08;1&#xff09;以太网通信原理&#xff08;2&#xff09;数据碰撞 3. 数据跨网络传输 …

计算机网络概论和数据通信基础

文章目录 计算机网络概论从物理构成上看&#xff0c;计算机网络包括硬件、软件和协议三大部分计算机网络的功能组成计算机网络的分类网络体系结构分层与体系结构接口、协议和服务数据传送单位OSI模型TCP/IP模型 数据通信基础数字信号调制为模拟信号正交振幅调制QAM 模拟数据编码…

STM32Cubemx TB6612直流电机驱动

一、TB6612FNG TB6612是一个支持双电机的驱动模块&#xff0c;支持PWM调速。PWMA、AIN1、AIN2 为一组控制引脚&#xff0c;PWMA 为 PWM 速度控制引脚&#xff0c;AIN1、AIN2 为方向控制引脚&#xff1b;PWMB、BIN1、BIN2 为一组控制引脚&#xff0c;PWMB 为 PWM 速度控制引脚&…

例40:滚动条的使用

建立一个EXE工程&#xff0c;在窗体上放一个文本框和一个水平滚动条。设置滚动条的最大最小属性分别为&#xff1a;100和1。如图36。 图36 为滚动条的change事件输入代码&#xff1a; Sub Form1_HScroll1_Change(hWndForm As hWnd, hWndControl As hWnd, hNewPos As Long, n…

【高效开发工具系列】PyCharm使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

更改WordPress作者存档链接author和用户名插件Change Author Link Structure

WordPress作者存档链接默认情况为/author/Administrator&#xff08;用户名&#xff09;&#xff0c;为了防止用户名泄露&#xff0c;我们可以将其改为/author/1&#xff08;用户ID&#xff09;&#xff0c;具体操作可参考『如何将WordPress作者存档链接中的用户名改为昵称或ID…

【二十四】【C++】多态

多态的基本概念 多态是一种允许使用相同的接口来访问不同的底层形式&#xff08;类型&#xff09;的对象的能力。C中的多态主要通过以下两种方式实现&#xff1a; 编译时多态&#xff08;静态多态&#xff09;&#xff1a;通过函数重载和运算符重载实现。 运行时多态&#x…

wordpress外贸成品网站模板

首页大图slider轮播&#xff0c;橙色风格的wordpress外贸网站模板 https://www.zhanyes.com/waimao/6250.html 蓝色经典风格的wordpress外贸建站模板 https://www.zhanyes.com/waimao/6263.html

C# Winform .net6自绘的圆形进度条

using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Windows.Forms;namespace Net6_GeneralUiWinFrm {public class CircularProgressBar : Control{private int progress 0;private int borderWidth 20; // 增加的边框宽度public int Progr…

通过VSCode开发Python项目

一、插件准备 Python 插件&#xff0c;必须 autoDocstring 生成注释&#xff0c;和Pycharm一样输入三个引号"""会生产注释结构 Todo Tree 高亮显示 TODO/FIXME 二、python相关设置 一&#xff09;设置python环境 按"F1"打开命令面板&#xff08;…

openai公司的chatgpt-3.5参数库内还未增加sora的语料信息

openai公司的chatgpt-3.5参数库内还未增加sora的语料信息&#xff01;我想通过openai公司的chatgpt3.5来了解一下关于sora的技术信息&#xff0c;结果呢&#xff0c;它竟然回答不知道sora是什么。看来&#xff0c;sora的语料库信息还未来得及加入chatgpt3.5的训练模型中。 如图…

vue的十大面试题详情

1 v-show与v-if区别 v-if与v-show可以根据条件的结果,来决定是否显示指定内容&#xff1a; v-if: 条件不满足时, 元素不会存在. v-show: 条件不满足时, 元素不会显示(但仍然存在). <div id"app"><button click"show !show">点我</but…

ELAdmin 隐藏添加编辑按钮

使用场景 做了一个监控模块&#xff0c;数据都是定时生成的&#xff0c;所以不需要手动添加和编辑功能。 顶部不显示 可以使用 true 或者 false 控制现实隐藏 created() {this.crud.optShow {add: false,edit: false,del: true,download: true,reset: true}},如果没有 crea…

ubuntu服务器部署gitlab docker并配置nginx反向代理https访问

拉取镜像 docker pull gitlab/gitlab-ce运行容器 docker run --detach \--publish 9080:80 --publish 9022:22 --publish 9443:443\--namegitlab \--restartalways \--volume /home/docker/gitlab/config:/etc/gitlab \--volume /home/docker/gitlab/logs:/var/log/gitlab \-…

直接查看电脑几核芯几线程的方法

之前查看电脑几核芯几线程时都是点击 此电脑->属性->设备管理器->处理器 但是这样并不能判断是否有多线程 譬如这里&#xff0c;是2核芯2线程还是4核芯&#xff1f; 实际上&#xff0c;打开任务管理器后点击性能查看核芯线程数即可 所以示例这台电脑是4核芯而不是2…

PDF控件Spire.PDF for .NET【安全】演示:如何在 PDF 中添加签名字段

Spire.PDF for .NET 是一款独立 PDF 控件&#xff0c;用于 .NET 程序中创建、编辑和操作 PDF 文档。使用 Spire.PDF 类库&#xff0c;开发人员可以新建一个 PDF 文档或者对现有的 PDF 文档进行处理&#xff0c;且无需安装 Adobe Acrobat。 E-iceblue 功能类库Spire 系列文档处…