vue接入万达IAM（统一身份认证登录）记录

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);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

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));
1
2
3
4
5
6
7
8
9

token 过期处理：

5、入参回调地址时，可根据当前域名来拼接, 不用多环境下的配置

6、正式环境部署时，修改 clientSecret 为正式环境中使用的 clientSecret 。需申请。

注： 访问万达 开发环境 下的接口时，需通过内网解析才可以。 可尝试通过使用 vpn。