Dolphinescheduler-ui加双因素认证

概要

Dolphinescheduler在ui登录页面，加一层二维码页面，通过二维码绑定动态验证码，实现登录双重认证

整体流程设计

1、改变登录页接收参数接口

src/service/modules/login/types.ts

interface LoginReq {
  userName: string
  userPassword: string
}
interface LoginRes {
  securityConfigType: string
  sessionId: string
  // 根据需求，增加自定义返回参数
  data: object
  code: number
  barCodeUrl: string
}
export { LoginReq, LoginRes }

注意：src/service/service.ts源码拦截器限制，只返回res.data，不返回code等信息

// The response to intercept
service.interceptors.response.use((res: AxiosResponse) => {
  // No code will be processed
  if (res.data.code === undefined) {
    return res.data
  }
  switch (res.data.code) {
    case 0:
      // ---只返回data---
      return res.data.data
    default:
      handleError(res)
      throw new Error()
  }
}, err)

2、更新用户登录页，控制登录、验证等页面跳转

登录格式src/views/login/index.tsx，新增提示

<NSpace>
  <NAlert
      title='首次登录：用户名 + 密码，绑定OTP码； 后续登录：用户名 + “密码 + OTP码”'
      type='info'
      style={{ marginTop: '10%' }}
  >
  </NAlert>
</NSpace>

登录逻辑src/views/login/use-login.ts

import { useRouter } from 'vue-router'
import { login } from '@/service/modules/login'
import { getUserInfo } from '@/service/modules/users'
import { useUserStore } from '@/store/user/user'
import type { Router } from 'vue-router'
import type { LoginRes } from '@/service/modules/login/types'
import type { UserInfoRes } from '@/service/modules/users/types'
import { useRouteStore } from '@/store/route/route'
import { useTimezoneStore } from '@/store/timezone/timezone'
import cookies from 'js-cookie'

export function useLogin(state: any) {
  const router: Router = useRouter()
  const userStore = useUserStore()
  const routeStore = useRouteStore()
  const timezoneStore = useTimezoneStore()

  const handleLogin = () => {
    state.loginFormRef.validate(async (valid: any) => {
      if (!valid) {
        const loginRes: LoginRes = await login({ ...state.loginForm })
		// TODO 新增，控制逻辑
        if ('barCodeUrl' in loginRes) {
          const barCodeUrl = loginRes.barCodeUrl
          // 跳转myqrcode页面，并传参barCodeUrl 
          router.push({ name: 'myqrcode', state: { barCodeUrl } })
        } else {
          // 原生代码，密码正确直接通过sessionId完成登录
          await userStore.setSessionId(loginRes.sessionId)
          await userStore.setSecurityConfigType(loginRes.securityConfigType)
          cookies.set('sessionId', loginRes.sessionId, { path: '/' })
          const userInfoRes: UserInfoRes = await getUserInfo()
          await userStore.setUserInfo(userInfoRes)
          const timezone = userInfoRes.timeZone ? userInfoRes.timeZone : 'UTC'
          await timezoneStore.setTimezone(timezone)
          const path = routeStore.lastRoute
          router.push({ path: path || 'home' })
        }
      }
    })
  }

  return {
    handleLogin
  }
}

3、新增二维码扫描，验证码绑定

路由配置src/router/routes.ts，新增二维码页面路径

/**
 * QR Code page
 */
const qrcodePage: RouteRecordRaw[] = [
  {
    path: '/myqrcode',
    name: 'myqrcode',
    component: components['myqrcode'],
    meta: {
      title: '验证码',
      auth: []
    }
  }
]
// qrcodePage为新增
const routes: RouteRecordRaw[] = [...basePage, ...loginPage, ...qrcodePage]

// 重新组织后导出
export default routes

views下创建和login并行目录myqrcode，包含文件如下：
src/views/myqrcode/index.tsx

/*
  （1）naive-ui库中的二维码标签<NQrCode/>，在2.36.0版本，开始提供该组件
  （2）login页面向myqrcode页面跳转params传参时，"vue-router": "^4.1.4"版本开始增加了删除未使用的参数这个功能；使用query如下：（本文使用state）
  		router.push({ name: 'myqrcode', query: { barCodeUrl : barCodeUrlValue } })
      	console.log('传递的数据: ', route.query.barCodeUrl)
 */
import { defineComponent, ref, onMounted } from 'vue'
import styles from './index.module.scss'
import {
  NButton,
  NQrCode,
  NSpace,
  NTag,
} from 'naive-ui'

import { useRouter, useRoute } from 'vue-router'
import type { Router } from 'vue-router'
import { useRouteStore } from '@/store/route/route'

const myqrcode = defineComponent({
  name: 'myqrcode',
  setup() {
    const route = useRoute()
    const state = history.state
    const barCodeUrlValue = ref('')
    onMounted(async () => {
      barCodeUrlValue.value = state.barCodeUrl
    })
    
    const router: Router = useRouter()
    const routeStore = useRouteStore()
    const handleLogin = () => {
      const path = routeStore.lastRoute
      router.push({ path: 'login' })
    }

    return {
      handleLogin,
      barCodeUrlValue
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <div class={styles['code-model']}>
          <NSpace>
            <NQrCode id='qr-code' value={this.barCodeUrlValue} size={183}></NQrCode>
          </NSpace>
          <NSpace>
            <NTag style={{ marginTop: '10%',  height: '80%', color: 'black', textColor: '#555', borderColor: '#555' }} >
              扫描二维码，获取“动态验证码”
              <br/>
              获取成功后，返回重新登录
            </NTag>
          </NSpace>
        </div>
        <div class={styles['back-model']}>
          <NButton
            class='btn-qrcode'
            round
            type='info'
            style={{ color: 'black' }}
            onClick={this.handleLogin}
          >
            返回
          </NButton>
        </div>
      </div>
    )
  }
})

export default myqrcode

src/views/myqrcode/index.module.scss

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0098e1;

  .back-model {
    position: absolute;
    top: 20px;
    right: 30px;
    background: #fff;
  }

  .code-model {
    size: 600px;

    .tag-model {
      marginTop: 20%;
      width: 100%;
      color: black;
      textColor: #555;
      borderColor: #555
    }
  }
}

技术细节

（1）Naive-ui库中的二维码标签 NQrCode，在2.36.0版本，开始提供该组件
（2）login页面向myqrcode页面跳转params传参时，“vue-router”: "^4.1.4"版本开始增加了删除未使用的参数这个功能
https://segmentfault.com/q/1010000042469850
（3）vue3+ts打包报错
https://blog.csdn.net/weixin_42021688/article/details/128206358

技术名词

• vue3
• typescript
• Naive UI

小结

略

---

如有不足，请多多指正！