V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tlerbao
V2EX  ›  Vue.js

Vue3 应用在企业微信下自动登录的相关问题?

  •  
  •   tlerbao · 288 天前 · 1292 次点击
    这是一个创建于 288 天前的主题,其中的信息可能已经有所发展或是发生改变。

    实现

    企业微信客户端打开则自动跳转 OAuth 连接授权成功后 Callback Code 回来去后端换区用户 token 自动登录;非企业微信客户端跳转到 Login 页面。。

    问题

    1. 目前我整个逻辑写在了 router.beforeEach 里,写这里合适吗,大家都写在哪里(比如是否把跳转和自动登录写在 main.ts 中路由前?)?

    2. 流程是否有问题?我的基本逻辑:判断有无 token 是否登录 > 判断是否企业微信客户端(是跳转 OAuth 连接并回调)> 判断是否有携带 Code ,自动登录。

    // 4.判断访问页面是否在路由白名单地址(静态路由)中,如果存在直接放行
      if (ROUTER_WHITE_LIST.includes(to.path)) return next();
    
      // 5.判断是否有 Token ,没有重定向到 login 页面
      if (!userStore.token) {
        if (isWeWork()) {
          userStore.loginWeWork().then(isSuccess => {
            if (isSuccess) next();
          });
        } else {
          next({ path: LOGIN_URL, replace: true });
        }
      } else {
        // 使用缓存视图
        useCachedViewStoreHook().addCachedView(to);
        next();
      }
    
    9 条回复    2024-02-08 09:30:38 +08:00
    F7TsdQL45E0jmoiG
        1
    F7TsdQL45E0jmoiG  
       288 天前
    附带企微用户 id 会更好
    tlerbao
        2
    tlerbao  
    OP
       288 天前
    @morenacl 你是指?
    jy02534655
        3
    jy02534655  
       288 天前
    这种判断按理说只需要判断一次就行了吧,为啥不卸载 main.js 里面
    importmeta
        4
    importmeta  
       288 天前
    巧了,刚做了一个类似的企业微信应用,前端不参与,直接用后端重定向。
    tlerbao
        5
    tlerbao  
    OP
       287 天前
    @jy02534655 这就是我来问的原因啊,菜吗,所以想请教一下各位怎么些更好哈
    wjfz
        6
    wjfz  
       287 天前
    直接让后端入口地址,让后端去搞跳转授权
    tlerbao
        7
    tlerbao  
    OP
       287 天前
    @wjfz 没太理解,后端也是我写哈哈,最后我还是要把登录成功的 token 交给前端 store 下的
    wjfz
        8
    wjfz  
       287 天前
    @tlerbao #7
    比如在后端设置一个 /wework/login 这样的路由,负责与企微进行 OAuth 授权流程。

    // 5.判断是否有 Token ,没有重定向到 login 页面
    if (!userStore.token) {
    if (isWeWork()) {
    // 跳转至后端 /wework/login
    }
    ...省略
    等后端拿到企微的 code 换取用户信息之后,把 token 写入 cookie ,前端把 cookie 里的 code 存到 userStore

    这样做的好处就是,在构造企微跳转链接的时候,前端不需要关注企微的 appid 、redirect_uri 等参数。
    tlerbao
        9
    tlerbao  
    OP
       287 天前
    @wjfz #8
    那就是
    1. 访问前端(未登录)
    2. 跳到后端(构造 OAuth 连接)
    3. 跳到 OAuth 连接授权
    4. 回调 Code 到后端,写入 token 到 Cookie
    5. 跳回前端
    6. 前端读取 cookie 里的 token 写入 store ,登录成功

    感觉有点麻烦呢哈哈。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3717 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 10:32 · PVG 18:32 · LAX 02:32 · JFK 05:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.