大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂

前言

现在是：2022年6月2日15:43:51

上篇文章讲述了springboot中实现用户统一认证的具体内容，主要从后端角度出发的，其实大部分功能还是前端与后端交互的比较多，上篇文章知识罗列了几个回调接口，我一般写这种API接口都是这样的思路。将调用的地址统一放在一个工具类（或者接口）中，然后具体的业务放在service层来实现，这样也方便后面别的类中共用。

涉及技能点

1. 前端：Vue（avue）
2. 后端：springboot (bladex框架)
3. 数据库：mysql 5.7及以上

实现思路

1. 上游平台通过回调接口，将用户和组织机构同步至子系统
2. 上游平台通过url在地址栏中挂sessionid的方式访问子系统的登录页面
3. 子系统检地址栏中是否有sessionid，如果有，则拿着sessionid去上游系统获取用户信息，然后在子系统中拿着用户信息自动登录
4. 如果地址栏中没有sessionid，则需要带着子系统的登录地址，重定向至上游平台（上游平台怎么处理的，我就不知道了，我猜测，如果用户未在上游平台登录，则不带sessionid来的子系统，如果登录了则会带着过来。所以重定向到上游平台时，应该是让用户重新进行登录的）
5. 当用户点击退出时，清除子系统的用户登录状态的同时还需要清除上游系统，且重定向至上游平台的登录页面

代码实现

1. 在permission.js中判断地址栏中是否带着xxl_sso_sessionid参数，拿到参数的值，去做处理。

代码如下：

	router.beforeEach((to, from, next) => {//单点登录//拿到地址栏中的参数//获取参数const threeSessionId = getQueryString("xxl_sso_sessionid");if (threeSessionId) {//拿到用户名threeCheckLogin(threeSessionId).then(res => {const code = res.data.code;if(code===200){const username =  res.data.data;//异步进行登录store.dispatch("LoginPrammeSystem", {username}).then(() => {sessionStorage.setItem("tag",0);//将ssoSessionKey保存起来(退出的时候要用，退出的时候记得要清空掉)localStorage.setItem("threeSessionId",threeSessionId);location.href = location.origin;});}});return;}else{//没有带着标识过来//第一步：在业务系统登录请求中判断Request中是否包含key值为xxl_sso_sessionid的值，// 如果获取不到，跳转到统一认证平台登录页面，需要带上跳转地址// （http://统一认证平台IP/login?redirect_url=业务系统登录地址）//  第二步：在统一认证平台登录页面点击“登录”按钮，登录成功后则跳转到http:// 业务系统登录地址?xxl_sso_sessionid=5_9b52f8fe1be24693a7492af854d53759const tag = sessionStorage.getItem("tag");if(tag!=='0'){location.href = tyrzptLoginUrl+"/login?redirect_url="+xuappLoginUrl;return;}}const meta = to.meta || {};const isMenu = meta.menu === undefined ? to.query.menu : meta.menu;store.commit("SET_IS_MENU", isMenu === undefined);if (getToken()) {if (store.getters.isLock && to.path !== lockPage) {//如果系统激活锁屏，全部跳转到锁屏页next({ path: lockPage });} else if (to.path === "/login") {//如果登录成功访问登录页跳转到主页next({ path: "/" });} else {//如果用户信息为空则获取用户信息，获取用户信息失败，跳转到登录页if (store.getters.token.length === 0) {store.dispatch("FedLogOut").then(() => {// next({ path: "/login" });//跳转到统一认证平台登录页面location.href = tyrzptLoginUrl + "/login"});} else {const value = to.query.src || to.fullPath;const label = to.query.name || to.name;const meta = to.meta || router.$avueRouter.meta || {};const i18n = to.query.i18n;if (to.query.target) {window.open(value);} else if (meta.isTab !== false &&!validatenull(value) &&!validatenull(label)) {store.commit("ADD_TAG", {label: label,value: value,params: to.params,query: to.query,meta: (() => {if (!i18n) {return meta;}return {i18n: i18n};})(),group: router.$avueRouter.group || []});}next();}}} else {//判断是否需要认证，没有登录访问去登录页if (meta.isAuth === false) {next();} else {//next("/login");//跳转到统一认证平台登录页面location.href = tyrzptLoginUrl+"/login"}}
});

2. 拿到地址栏中xxl_sso_sessionid参数值，去上游系统中获取用户信息，接口已经在上篇文章中发出，这边只写调动的地方。

代码如下：

	
/*** 拿着session_id去获取用户名去* @returns {AxiosPromise}* @param ssoSessionKey*/export const threeCheckLogin = (ssoSessionKey) => {return request({url: '/api/api/sso/check_login',method: 'get',params: {ssoSessionKey,}})}

注意：xxl_sso_sessionid的值，需要记录住，在退出的时候需要用，我这里直接放在了localStorage中。

3. 调用免密登录的方法，threeCheckLogin方法会给我们返回用户名，所以我们带着用户名，调用LoginPrammeSystem方法去登录。代码如下：

在modules/user.js中的actions写：

	//统一认证平台过来的用户登录此系统LoginPrammeSystem({ commit }, userInfo) {return new Promise((resolve, reject) => {LoginPrammeSystem("000000", userInfo.username,"xuapp").then((res) => {const data = res.data;if (data.error_description) {Message({message: data.error_description,type: "error",});} else {commit("SET_TOKEN", data.access_token);commit("SET_REFRESH_TOKEN", data.refresh_token);commit("SET_TENANT_ID", data.tenant_id);commit("SET_USER_INFO", data);commit("DEL_ALL_TAG");commit("CLEAR_LOCK");}resolve(data);}).catch((error) => {reject(error);});});},

4. 然后在api/user.js中写上具体登录的方法：

	
/*统一认证平台登录系统*/
export const LoginPrammeSystem = (tenantId, username, password) =>request({//去训练方案里面的系统登录url: "/api/blade-auth/oauth/token",method: "post",headers: {"Tenant-Id": tenantId,},params: {tenantId,username,password,grant_type: "custom",scope: "all",type: "",},});

5. 在org.springblade.modules.auth.granter包下面新建自定义鉴权类CustomTokenGranter，代码如下：

	/**      Copyright (c) 2018-2028, Chill Zhuang All rights reserved.**  Redistribution and use in source and binary forms, with or without*  modification, are permitted provided that the following conditions are met:**  Redistributions of source code must retain the above copyright notice,*  this list of conditions and the following disclaimer.*  Redistributions in binary form must reproduce the above copyright*  notice, this list of conditions and the following disclaimer in the*  documentation and/or other materials provided with the distribution.*  Neither the name of the dreamlu.net developer nor the names of its*  contributors may be used to endorse or promote products derived from*  this software without specific prior written permission.*  Author: Chill 庄骞 (smallchill@163.com)*/
package org.springblade.modules.auth.granter;import lombok.AllArgsConstructor;
import org.springblade.core.log.exception.ServiceException;
import org.springblade.core.tool.utils.DigestUtil;
import org.springblade.core.tool.utils.Func;
import org.springblade.modules.auth.enums.UserEnum;
import org.springblade.modules.auth.provider.ITokenGranter;
import org.springblade.modules.auth.provider.TokenParameter;
import org.springblade.modules.auth.utils.TokenUtil;
import org.springblade.modules.system.entity.Tenant;
import org.springblade.modules.system.entity.UserInfo;
import org.springblade.modules.system.service.ITenantService;
import org.springblade.modules.system.service.IUserService;
import org.springframework.stereotype.Component;/**
* @Description: 别的系统登陆本系统
* @author: 穆雄雄
* @date: 2022年5月24日17:58:31
No such property: code for class: Script1
* @Return:
*/
@Component
@AllArgsConstructor
public class CustomTokenGranter implements ITokenGranter {public static final String GRANT_TYPE = "custom";private final IUserService userService;private final ITenantService tenantService;@Overridepublic UserInfo grant(TokenParameter tokenParameter) {String tenantId = tokenParameter.getArgs().getStr("tenantId");String username = tokenParameter.getArgs().getStr("username");String password = tokenParameter.getArgs().getStr("password");UserInfo userInfo = null;if (Func.isNoneBlank(username)) {// 获取租户信息Tenant tenant = tenantService.getByTenantId(tenantId);if (TokenUtil.judgeTenant(tenant)) {throw new ServiceException(TokenUtil.USER_HAS_NO_TENANT_PERMISSION);}userInfo = userService.userInfo(tenantId, username);}return userInfo;}}

整个前端部分的登录流程大体就是这样的~欢迎大家指正。