前端实现免密登录

最新推荐文章于 2024-05-08 22:11:04 发布

前端小趴菜05

最新推荐文章于 2024-05-08 22:11:04 发布

阅读量717

点赞数 7

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_68716504/article/details/137010114

版权

本文介绍了如何在Vue路由守卫中处理URL参数中的加密token，实现用户无需登录即可通过验证直接访问首页，涉及Base64解码、token有效性检查和用户信息存储的过程。

摘要由CSDN通过智能技术生成

最近接到个需求，就是实现免密登录，用户在url参数中携带加密的token，直接进入首页，不需要登录，具体实现如下：

在router.beforeEach守卫中进行处理

router.beforeEach(async (to: any, from, next) => {
  const token = to.query.token // 从路由参数中获取 token
  //判断url是否携带token
  if (to.meta.whiteList && token) {
    const decodedToken = Base64.decode(token);// 解密 Base64 编码的 token
    //验证 token 的有效性并登录用户 
    let data = {
      token: decodedToken
    }
    try {
      let res:any = await checktoken(data)
        // .then((res: any) => {
        // 验证成功，将用户信息保存到全局状态管理或本地存储 pinia
      if (res.code == 0) {
          
          storage.local.set('token', res.data.accessToken);
          // storage.local.set('token', Base64.decode(token));
          storage.local.set('username', res.data.userName)
          storage.local.set('expiresTime', res.data.expiresTime)
          storage.local.set('tenantid', JSON.stringify(res.data.tenantId))
          let asTenant = ref({
            id: res.data.tenantId,
            name: res.data.tenantName
          })

          storage.local.set('asTenant', JSON.stringify(asTenant.value))
          userStore.token = res.data.accessToken
          userStore.username = res.data.userName
          userStore.expiresTime = res.data.expiresTime
          userStore.tenantid = res.data.tenantId
          userStore.asTenant = asTenant.value
          //修改登录状态
          userStore.isLogin = true
          // console.log(userStore.isLogin);

        } 
      // })
  }
     catch (error) {
      // console.log(error, '222');
      userStore.urltoken = true
    }
     
  }