colexiu-project/src/views/App.tsx

import ColFooter from '@/components/col-footer'
import ColHeader from '@/components/col-header'
import { ElDialog } from 'element-plus'
import { defineComponent } from 'vue'
import { RouterView } from 'vue-router'
import Login from './login'
import styles from './App.module.less'
import { state } from '@/state'
import { getAuth, getUserType } from '@/helpers/utils'
import request from '@/helpers/request'

export default defineComponent({
  name: 'App',
  async mounted() {
    const token = getAuth()
    const userType = getUserType()
    // 判断是否有token，token和userType 判断是否登录
    if (!token) {
      return
    }

    try {
      const url =
        userType === 'TEACHER'
          ? '/api-website/teacher/queryUserInfo'
          : '/api-website/student/queryUserInfo'
      const res = await request.get(url)
      console.log(res)
    } catch {}
  },
  render() {
    return (
      <>
        <ColHeader />
        <RouterView></RouterView>
        <ColFooter />
        {/* 登录弹窗 */}
        <div class={styles.loginContainer}>
          <ElDialog
            modelValue={state.loginPopupStatus}
            onUpdate:modelValue={val => (state.loginPopupStatus = val)}
            closeOnClickModal={false}
            closeOnPressEscape={false}
          >
            <Login
              onClose={() => {
                clearTimeout(state.loginPopupTimer)
                state.loginPopupStatus = false
              }}
            />
          </ElDialog>
        </div>
      </>
    )
  }
})