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

[tlerbao]

实现

企业微信客户端打开则自动跳转 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();
  }

[F7TsdQL45E0jmoiG]

附带企微用户 id 会更好

[tlerbao]

@morenacl 你是指？

[jy02534655]

这种判断按理说只需要判断一次就行了吧，为啥不卸载 main.js 里面

[importmeta]

巧了，刚做了一个类似的企业微信应用，前端不参与，直接用后端重定向。

[tlerbao]

@jy02534655 这就是我来问的原因啊，菜吗，所以想请教一下各位怎么些更好哈

[wjfz]

直接让后端入口地址，让后端去搞跳转授权

[tlerbao]

@wjfz 没太理解，后端也是我写哈哈，最后我还是要把登录成功的 token 交给前端 store 下的

[wjfz]

@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]

@wjfz #8
那就是
1. 访问前端（未登录）
2. 跳到后端（构造 OAuth 连接）
3. 跳到 OAuth 连接授权
4. 回调 Code 到后端，写入 token 到 Cookie
5. 跳回前端
6. 前端读取 cookie 里的 token 写入 store ，登录成功

感觉有点麻烦呢哈哈。