1、需先提前申请测试环境下的 clientId
和 clientSecret
2、第一步获取授权码的 code
接口 和 退出登录的接口,均通过 window.loaction
的方式请求
即: window.location.replace(redirectSsoLoginUrl);
即可。
3、在路由守卫中,判断当前是 IAM 登录成功回调 还是页面 刷新,IAM 登录成功回调时根据返回 code 请求 token 和用户信息。 页面刷新时,设置登录状态
// 创建路由守卫
router.beforeEach(async (to, from, next) => {
// 如果当前路由中存在code
const isGetSsoCode = getQueryString('code') || '';
const tokenInfo = localStorage.getItem('tokenInfo') || '';
const sessionCode = sessionStorage.getItem('ssoCode') || '';
// console.log(to);
// 判断是否登陆
if (isGetSsoCode && to.name === 'IamLoadPage') {
// IAM 登录成功,拿到了 code
// console.log('getCodeOk--->', isGetSsoCode);
sessionStorage.setItem('ssoCode', isGetSsoCode);
next();
} else if (tokenInfo && sessionCode) {
next();
// 页面刷新时,如果有token 和 缓存code 则表示已经登录过,设置全局登录信息
const roleList = JSON.parse(localStorage.getItem('userRoleList'))?.userRoleList ?? [];
store.commit('global/setUserRoleProjectList', roleList);
store.commit('global/setLogin', true);
// 判断token是否过期
const { startTime, expiresIn, refreshToken } = JSON.parse(tokenInfo);
const nowTime = new Date().getTime();
// token 过期时刷新token
if (nowTime / 1000 - startTime / 1000 >= expiresIn) {
try {
const res = await refreshTokenApi({ refreshToken });
// 重新换取token
const {
// eslint-disable-next-line camelcase
access_token,
// eslint-disable-next-line camelcase
refresh_token,
uid,
// eslint-disable-next-line camelcase
expires_in
} = res;
// 本地存储token
const wdTokenInfo = {
accessToken: access_token,
refreshToken: refresh_token,
uid,
expiresIn: expires_in
};
const newTokenInfo = Object.assign(wdTokenInfo, { startTime: new Date().getTime() });
localStorage.setItem('tokenInfo', JSON.stringify(newTokenInfo));
} catch (error) {
Toast({
message: '登录过期,请重新登录',
duration: 2000,
onClose: () => {
console.log('登录过期');
localStorage.removeItem('tokenInfo');
sessionStorage.clear();
window.location.replace(redirectSsoLoginUrl);
}
});
}
}
} else {
// 未登录,请求至 IAM 登录地址
window.location.replace(redirectSsoLoginUrl);
}
});
4、token 过期处理
拿到 token
,和 token有效时间 expires_in
有效期 之后,获取当前时间戳 一并缓存到本地,每次路由切换 或者 api 请求之前判断当前 token 是否过期,过期则请求 刷新token 的接口
注意:一般返回的 token 有效时间单位为 秒
, 和当前 时间戳
对比时需将 毫秒
换算成 秒
。
new Date().getTime() / 1000
即可。
const wdTokenInfo = {
accessToken: access_token,
refreshToken: refresh_token,
uid,
expiresIn: expires_in
};
// 本地存储 token
const tokenInfo = Object.assign(wdTokenInfo, { startTime: new Date().getTime() });
localStorage.setItem('tokenInfo', JSON.stringify(tokenInfo));
token 过期处理:
5、入参回调地址时,可根据当前域名
来拼接, 不用多环境下的配置
6、正式环境部署时,修改 clientSecret 为正式环境中使用的 clientSecret 。需申请。
注: 访问万达 开发环境 下的接口时,需通过内网解析才可以。 可尝试通过使用 vpn。