vue3 实现跨域单点登录

要实现跨域单点登录，可以使用 JWT（JSON Web Token）来实现。具体步骤如下：

1. 用户在登录页面输入用户名和密码，前端将用户名和密码发送到后端进行验证。
2. 后端验证通过后，生成一个 JWT，并将 JWT 返回给前端。
3. 前端将 JWT 存储在本地，每次请求时都将 JWT 放在请求头中发送给后端。
4. 后端在接收到请求时，验证 JWT 的有效性，如果有效则返回请求结果，否则返回错误信息。

在 Vue3 中，可以使用 axios 库来发送请求，并且可以通过 axios 的拦截器来实现 JWT 的自动添加和验证。具体代码如下：

import axios from 'axios'

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 从本地存储中获取 JWT
  const token = localStorage.getItem('token')
  // 如果 JWT 存在，则将其添加到请求头中
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(response => {
  return response.data
}, error => {
  // 如果响应状态码为 401，则说明 JWT 失效或未授权，需要重新登录
  if (error.response.status === 401) {
    // 跳转到登录页面
    window.location.href = '/login'
  }
  return Promise.reject(error)
})

export default instance