赞
踩
这一章节我们考虑对接一下前端页面的登录,我这里采用的是比较经典的架构“前后端分离”,前端是VUE+ElementUI实现
后端没什么说的,跟之前文章中一样,你需要搭建独立的认证中心,其他的微服务做为资源服务即可,对于前台登录首先少不了账号密码登录模式,所以我们的方案可以这样,前台直接封装请求向认证中心获取Token可以使用“password”模式,然后把Token存储到SessionStorage中,请求资源的时候给Header添加上Token即可.
使用“password”模式请求Token,如下:
var param = "username=zs&password=123&client_id=system&client_secret=123&grant_type=password";
//请求参数的内容格式为普通方式,否则默认使用JSON格式提交参数
var config={
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
};
this.$http.post("/auth/oauth/token",param,config).then(res=>{
//获取到Token
var token = res.data.access_token;
var refresh_token = res.data.refresh_token;
//把token存储起来
sessionStorage.setItem("U-TOKEN",token);
sessionStorage.setItem("R-TOKEN",refresh_token );
sessionStorage.setItem("user",'{"username":"zs"}');
//修改登录成功后跳转到首页
this.$router.push({ path: '/main' });
this.logining = false;
return;
}).catch(error => {
this.$message.error(error.message);
this.logining = false;
return;
});
这里 Content-Type 设置为 application/x-www-form-urlencode ,发送请求到认证中心获取Token,然后存储Token
当然您可以会觉得这样去带参数会暴露 client_secret 秘钥,那你可以稍作修改,就是做一个登陆接口,前台只带着用户名和密码去登陆,在登录接口中获取client_id和client_secret 加上参数中的用户名和密码组装成完整的URL使用HTTP调用认证中心的令牌获取接口获取令牌,然后返回给客户端,比如:
var loginParams = { username: "zs", password: "123",clientId:"system"};
//发起请求 http://localhost:1020/hrm/auth/auth/oauth/token?
this.$http.post("/auth/login/accessToken",loginParams).then(res=>{
//获取到Token
var token = res.data.resultObj.access_token;
var refresh_token = res.data.resultObj.refresh_token;
//把token存储起来
sessionStorage.setItem("U-TOKEN",token);
sessionStorage.setItem("R-TOKEN",refresh_token);
sessionStorage.setItem("user",'{"username":"zs"}');
//修改登录成功后跳转到首页
this.$router.push({ path: '/main' });
this.logining = false;
return;
}).catch(error => {
this.$message.error(error.message);
this.logining = false;
return;
});
后台登录代码
@Override
public AjaxResult login(Login login) {
ValidUtils.assertNotNull(login.getUsername(),"用户名不可为空");
ValidUtils.assertNotNull(login.getPassword(),"密码不可为空");
ValidUtils.assertNotNull(login.getClientId(),"clientId不可为空");
//String urlAccessToken = "%s/oauth/token?username=%s&password=%S&client_id=%S&client_secret=%s&grant_type=password"
//组装获取Token的Url
String accessTokenUrl = String.format(AuthConstants.URL_ACCESS_TOKEN,
oauthProperties.getAuthServerUrl(), //获取令牌地址
login.getUsername(), //用户名
login.getPassword(), //密码
login.getClientId(), //客户端ID
oauthProperties.getSecrectByClentId(login.getClientId())); //秘钥
//发送Http请求获取Token,返回给浏览器
return AjaxResult.me().setResultObj(HttpUtil.sendPost(accessTokenUrl));
使用Axios拦截器给请求头添加Token,如下:
axios.interceptors.request.use(config => {
//如果已经登录了,每次都把token作为一个请求头传递过程
if (sessionStorage.getItem('U-TOKEN')) {
// 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
config.headers['Authorization'] = "Bearer "+sessionStorage.getItem('U-TOKEN')
}
return config
}, error => {
// Do something with request error
Promise.reject(error)
})
这样一来,每次发送请求都会在请求头中携带Token了,请求到了网关层就会对Token进行校验
如果Token过期怎么办?Token过期请求会失败出现401错误,
后面两种都可以实现Token无感刷新,第三种方案更适合前后端分离项目
Axios响应拦截器拦截401异常
axios.interceptors.response.use(config => {
return config
},error => {
if (error && error.response) {
switch (error.response.status) {
case 401: return doRequest(error);
}
}
Promise.reject(error)
});
如果是401异常,说明Token过期了,同步发送刷新Token请求,刷新TokenURL是
/auth/oauth/token?client_id=system&client_secret=123
&grant_type=refresh_token&refresh_token=刷新Token
刷新Token是需要带着上一次获取Token返回的refresh_token值,所以在登录成功后除了要保持Token还要保存refresh_token
刷新Token请求如下:
async function doRequest (error) {
try {
//刷新Token请求
const data = await getNewToken();
var token = data.data.access_token;
var refresh_token = data.data.refresh_token;
//重新设置Token
sessionStorage.setItem("U-TOKEN",token);
sessionStorage.setItem("R-TOKEN",refresh_token);
console.log("刷新Token:"+token);
//继续请求之前未完成的请求
const res = await axios.request(error.config);
return res;
} catch(err) {
alert("登录失效,请重新登录");
sessionStorage.clear();
router.replace({ path:"/login" });
return err;
}
}
async function getNewToken() {
//获取到保存的refresh_token值
var refreshToken = sessionStorage.getItem('R-TOKEN');
//这里要发送同步请求
return await axios({
url: '/auth/oauth/token?client_id=system&client_secret=123&grant_type=refresh_token&refresh_token='+refreshToken,
method: 'post',
headers: {
'Content-Type':'application/x-www-form-urlencoded'
}
})
}
同步方式获取到新的Token,重新存储到sessionStorage中,然后调用axios.request继续执行之前的请求,这一次请求头中带的就是新的Token
到这里就结束了,这里介绍了两个内容,一个是使用“password”授权模式基于账号密码的登录,二个是基于前端的Token刷新,当然对于短信登录,邮件登录,三方登录肯定有所不一样,这里暂不讨论,希望文章对你有所帮助
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。