记录企业微信授权登录流程实现

项目需要使用企业微信授权登录 vue3+ts

登录流程：用户进入首页点击登录=》后端会给一个url地址给你跳转进行授权，授权后后端会帮你跳转回首页并携带query参数，你可以根据query参数获取用户token

小需求：因为url中会有query，需要去除，用到了以下代码

const url = router.resolve(route.path)
location.href = url.href

刷新之后会判断是否有token

1.有的话，弹窗让用户输入用户名（因为后端只能通过企业微信获取到手机号和用户id，名字是获取不到的），再请求用户信息

2.没有的话，是判断是否有query参数，去获取token，然后按上面方法刷新页面去除query

以上步骤是在index.vue中写的

但项目说要考虑到用户是点击链接进来的。

如果用户是有token，但不在首页，就获取不到用户信息了，所以我是在app.vue中判断是否有用户信息，没有的话，再次请求（这里会有问题，就是如果一上来就在首页，会获取两次用户信息，求指点指点）

const commonStore = useCommonStore()
if (!commonStore.userData.id) {
  commonStore.changeUserInfo()
}

大致代码：

index.vue

const init = () => {
  if (commonStore.isLogin) { // 如果登录
    commonStore.changeUserInfo()
    console.log(commonStore.userData);
    getHomeData()
     // 事项未读数量
    getViewCount()
  } else {
    // 如果未登录，判断路径是否有query
    console.log(route.query);
    const status = route.query.code
    const id = route.query.id as string
    const code = route.query.noncestr as string
    const msg:any = route.query.msg || '授权错误'
    if (status === '0' && code) { // 为0，有权限，为1，没有权限
      api.getToken(id, code)
        .then((res) => {
          console.log(res);
          if (res.code === 1) {
            localStorage.setItem('token', res.data.token)
            const url = router.resolve(route.path)
            location.href = url.href
          } else {
            console.log(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        })
    } else if (status === '1') {
      showToast(msg)
    }
  }
}
init()

const activityContent = computed(() => {
  return activityList.data.length > 0 ? activityList.data[0].content : ''
})

store

async changeUserInfo  (): Promise<void> {
            if (!this.userData.id && localStorage.getItem('token')) {
                const data: any = await api.getUserInfo()
                if (data.code === 1) {
                    this.userData = data.data
                    console.log('用户数据', this.userData);
                } else {
                    this.userData = {
                        id: 0,
                        name: '',
                        nickname: '',
                        thumb_avatar: '',
                        edit_share: 0,
                        status_text: ''
                    }
                }
            }
        },

记录企业微信授权登录流程实现

猜你喜欢