第1页 / 共6页
第2页 / 共6页
第3页 / 共6页
第4页 / 共6页
第5页 / 共6页
第6页 / 共6页
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码.pdf
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
完成登录认证的示例代码
本篇文章主要介绍了Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本人野生程序员一名，了解了一些微服务架构、前后端分离、SPA的知识后就想试试做点什么东西。之前一直做后端，前端只是有基础知识。之前学习过angularjs，但当时就是一脸懵逼（完全看不懂是
啥）就放弃了。最近又学了Vue，这次感觉总算明白了一些，但其中也跳过很多坑（应该还会更多），在这里写下来记录一下吧。
说回主题，之前传统登录认证的方法基本是由服务器端提供一个登录页面，页面中的一个form输入username和password后POST给服务器，服务器将这些信息与DB或Ldap中的用户信息对比，成功则将
这个用户信息记录到session中。
这里我就跳了第一个大坑。传统方式前后端不分离，后端负责页面渲染，但是在前后分离的情况下，后端只负责通过暴露的RestApi提供数据，而页面的渲染、路由都由前端完成。因为rest是无状态的，
因此也就不会有session记录到服务器端。
之前一直使用SpringSecurity+Cas+Ldap来做SSO，但是使用Vue做前端后我怎都想不出用之前的方法做SSO（这个坑真的爬了好久才爬出来）。后来终于想明白了上面说的session的问题（我是这么认
为的也可能不对，CAS也有RestApi，但是按官网配置没成功，放弃了）。
第一个问题，该如何解决SSO的问题呢，要说到JWT。JWT是个规范，各种语言有各种语言的实现，可以去官网查到。我浅薄的理解是有一个认证服务（你自己写的，Db、Ldap什么都可以）这个认证
服务会通过用户的提交信息判断认证是否成功，如果成功则查询出一些用户的信息（用户名、角色什么的），然后JWT把这些信息加密成为一个token，返回给客户端浏览器，浏览器把这些信息存储在
localstorage中，以后每次访问资源都会在header中携带这个信息，服务器收到请求后使用和加密时相同的key解密密文，如果解密成功则视为用户已经认证过（当然你可以在加密时添加以一个过期时
间）也就完成了SSO。使用解密出的角色信息你就可以判断这个用户是否有权限执行一些业务。这样做完后感觉好像SpringSecurity、Cas在SPA应用中的SSO似乎没什么作用了，目前我是这么认为的
（当然可能不对）
第一个问题差不多解决了，来说第二个问题。之前因为有session的存在，在访问受保护的资源时如果服务器端没有当前用户的session，则会强制跳转到登录页。那在前后分离的情况下要如何实现这个
需求。思路是这样的：利用Vue-Router的全局路由钩子，在访问任何页面时先判断localStorage中是否存在JWT加密后的token并且token是否过期，如果存在且没有过期则正常跳转到请求的页面，不存在
或者过期则跳转到登录页重新认证。
思路说完了，上代码
思路说完了，上代码
1.首先你需要一个Ldap，我使用的是AD。这里我建立了一个叫minibox.com的域，并且添加了一个Employees的OU，其中有2个子OU，子OU中创建了2个用户。
在Groups中新建一些组，把之前创建的用户加入到组中，这样用户就拥有了角色。
2.搭建SpringBoot环境
2.1pom文件
4.0.0
minibox
an
0.0.1-SNAPSHOT
org.springframework.boot
spring-boot-starter-parent
1.5.1.RELEASE
org.springframework.boot
spring-boot-starter-web
return ldapContextSource;
}
public static void main(String[] args) throws Exception {
SpringApplication.run(Application.class, args);
}
}
3.1提供认证服务的类
package an.auth;
import javax.naming.directory.Attributes;
import javax.naming.directory.DirContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.ldap.NamingException;
import org.springframework.ldap.core.AttributesMapper;
import org.springframework.ldap.core.LdapTemplate;
import org.springframework.ldap.support.LdapUtils;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;
import static org.springframework.ldap.query.LdapQueryBuilder.query;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import an.entity.Employee;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
@RestController
@RequestMapping("/auth")
public class JwtAuth {
//jwt加密密匙
@Value("${jwt.key}")
private String jwtKey;
//域名后缀
@Value("${ldap.domainName}")
private String ldapDomainName;
//ldap模板
@Autowired
private LdapTemplate ldapTemplate;
/**
* 将域用户属性通过EmployeeAttributesMapper填充到Employee类中，返回一个填充信息的Employee实例
*/
private class EmployeeAttributesMapper implements AttributesMapper {
public Employee mapFromAttributes(Attributes attrs) throws NamingException, javax.naming.NamingException {
Employee employee = new Employee();
employee.setName((String) attrs.get("sAMAccountName").get());
employee.setDisplayName((String) attrs.get("displayName").get());
employee.setRole((String) attrs.get("memberOf").toString());
return employee;
}
}
/**
* @param username 用户提交的名称
* @param password 用户提交的密码
* @return 成功返回加密后的token信息，失败返回错误HTTP状态码
*/
@CrossOrigin//因为需要跨域访问，所以要加这个注解
@RequestMapping(method = RequestMethod.POST)
public ResponseEntity authByAd(
@RequestParam(value = "username") String username,
@RequestParam(value = "password") String password) {
//这里注意用户名加域名后缀 userDn格式：anwx@minibox.com
String userDn = username + ldapDomainName;
//token过期时间 4小时
Date tokenExpired = new Date(new Date().getTime() + 60*60*4*1000);
DirContext ctx = null;
try {
//使用用户名、密码验证域用户
ctx = ldapTemplate.getContextSource().getContext(userDn, password);
//如果验证成功根据sAMAccountName属性查询用户名和用户所属的组
Employee employee = ldapTemplate .search(query().where("objectclass").is("person").and("sAMAccountName").is(username),
new EmployeeAttributesMapper())
.get(0);
//使用Jwt加密用户名和用户所属组信息
String compactJws = Jwts.builder()
.setSubject(employee.getName())
.setAudience(employee.getRole())
.setExpiration(tokenExpired)
.signWith(SignatureAlgorithm.HS512, jwtKey).compact();
//登录成功，返回客户端token信息。这里只加密了用户名和用户角色，而displayName和tokenExpired没有加密
Map userInfo = new HashMap();
userInfo.put("token", compactJws);
userInfo.put("displayName", employee.getDisplayName());
userInfo.put("tokenExpired", tokenExpired.getTime());
return new ResponseEntity(JSON.toJSONString(userInfo , SerializerFeature.DisableCircularReferenceDetect) , HttpStatus.OK);
} catch (Exception e) {
//登录失败，返回失败HTTP状态码
return new ResponseEntity(HttpStatus.UNAUTHORIZED);
} finally {
//关闭ldap连接
LdapUtils.closeContext(ctx);
}
}
}
4.前端Vue
4.1使用Vue-cli搭建项目，并使用vue-router和vue-resource，不了解的可以搜索下
4.2 main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import store from './store/store'
import 'bootstrap/dist/css/bootstrap.css'
import App from './App'
import Login from './components/login'
import Hello from './components/hello'
Vue.use(VueRouter)
Vue.use(VueResource)
//Vue-resource默认以payload方式提交数据，这样设置之后以formData方式提交
Vue.http.options.emulateJSON = true;
const routes = [
{
path: '/login',
component : Login
},{
path: '/hello',
component: Hello
}
]
const router = new VueRouter({
routes
})
//默认导航到登录页
router.push('/login')
/*
全局路由钩子
访问资源时需要验证localStorage中是否存在token
以及token是否过期
验证成功可以继续跳转
失败返回登录页重新登录
*/
router.beforeEach((to, from, next) => {
if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
next()
}
else{
next('/login')
}
})
new Vue({
el: '#app',
template: '
5效果
5.1访问http://localhost:8000时被导航到登录页
5.2提交登录信息并取得token，跳转下一页
AdminLTE
@minibox.com
用户名或密码错误
到这里整个功能就完成了。本人也是菜鸟一枚，理解有错误的地方还请各位老师指正。打算把整个分布式系统的开发过程记录下来。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
