网络请求配置，开发登录接口

zhuguifei

2025-04-18 eac7c5321dca68e34db95995db2cabd29b9324da

网络请求配置，开发登录接口

 eims-ui-mobile/env/.env

@@ -7,7 +7,7 @@
# h5部署网站的base，配置到 manifest.config.ts é‡Œçš„ h5.router.base
VITE_APP_PUBLIC_BASE=/

VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run'
VITE_SERVER_BASEURL = 'http://192.168.12.33:8080'
VITE_UPLOAD_BASEURL = 'https://ukw0y1.laf.run/upload'

# æœ‰äº›åŒå­¦å¯èƒ½éœ€è¦åœ¨å¾®ä¿¡å°ç¨‹åºé‡Œé¢æ ¹æ® develop、trial、release åˆ†åˆ«è®¾ç½®ä¸Šä¼ åœ°å€ï¼Œå‚考代码如下。
@@ -23,3 +23,7 @@
# h5是否需要配置代理
VITE_APP_PROXY=false
VITE_APP_PROXY_PREFIX = '/api'


# åŽç«¯å‚数配置
VITE_APP_CLIENT_ID = '428a8310cd442757ae699df5d894f051'

 eims-ui-mobile/pages.config.ts

@@ -4,8 +4,8 @@
  globalStyle: {
    navigationStyle: 'default',
    navigationBarTitleText: '兰宝设备管理',
    navigationBarBackgroundColor: '#f8f8f8',
    navigationBarTextStyle: 'black',
    navigationBarBackgroundColor: '#4D80F0',
    navigationBarTextStyle: 'white',
    backgroundColor: '#FFFFFF',
  },
  easycom: {
@@ -20,7 +20,7 @@
  tabBar: {
    custom: true,
    color: '#999999',
    selectedColor: '#007aff',
    selectedColor: '#4D80F0',
    borderStyle: 'black',
    height: '50px',
    fontSize: '10px',

 eims-ui-mobile/src/components/fg-tabbar/fg-tabbar.vue

@@ -6,7 +6,7 @@
    safeAreaInsetBottom
    placeholder
    @change="selectTabBar"
    active-color="#007aff"
    active-color="#4D80F0"
    inactive-color="#7d7e80"
  >
    <block v-for="(item, idx) in tabbarList" :key="item.path">

 eims-ui-mobile/src/env.d.ts

@@ -23,6 +23,7 @@
  readonly VITE_UPLOAD_BASEURL: string
  /** æ˜¯å¦æ¸…除console */
  readonly VITE_DELETE_CONSOLE: string
  readonly VITE_APP_CLIENT_ID: string
  // æ›´å¤šçŽ¯å¢ƒå˜é‡...
}


 eims-ui-mobile/src/interceptors/route.ts

@@ -4,15 +4,15 @@
 * å¯ä»¥è®¾ç½®è·¯ç”±ç™½åå•ï¼Œæˆ–者黑名单，看业务需要选哪一个
 * æˆ‘这里应为大部分都可以随便进入，所以使用黑名单
 */
import { useUserStore } from '@/store'
import { useUserStore, useAccessStore } from '@/store'
import { needLoginPages as _needLoginPages, getNeedLoginPages } from '@/utils'

// TODO Check
const loginRoute = '/pages/login/index'

const isLogined = () => {
  const userStore = useUserStore()
  return userStore.isLogined
  const accessStore = useAccessStore()
  return accessStore.isLogined
}

const isDev = import.meta.env.DEV

 eims-ui-mobile/src/pages.json

@@ -2,8 +2,8 @@
  "globalStyle": {
    "navigationStyle": "default",
    "navigationBarTitleText": "兰宝设备管理",
    "navigationBarBackgroundColor": "#f8f8f8",
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#4D80F0",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#FFFFFF"
  },
  "easycom": {
@@ -16,7 +16,7 @@
  "tabBar": {
    "custom": true,
    "color": "#999999",
    "selectedColor": "#007aff",
    "selectedColor": "#4D80F0",
    "borderStyle": "black",
    "height": "50px",
    "fontSize": "10px",
@@ -60,7 +60,6 @@
      "type": "home",
      "layout": "tabbar",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": "首页"
      }
    },
@@ -68,6 +67,7 @@
      "path": "pages/equ/index",
      "type": "page",
      "layout": "tabbar",
      "needLogin": true,
      "style": {
        "navigationBarTitleText": "关于"
      }
@@ -77,7 +77,6 @@
      "type": "page",
      "layout": "default",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": "登录"
      }
    },

 eims-ui-mobile/src/service/login.d.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,7 @@
export interface LoginParams {
  username: string;
  password: string;
  clientId?: string;
  tenantId?: string;
  grantType?: string;
}

 eims-ui-mobile/src/service/login.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,25 @@
import { http } from '@/utils/http'
import type { LoginParams } from './login.d'
const clientId = import.meta.env.VITE_APP_CLIENT_ID

const DEFAULT_TENANT_ID = '000000'
const GRANT_TYPE = 'password'

/** GET è¯·æ±‚ */
export const getFooAPI = (name: string) => {
  return http.get<LoginParams>('/foo', { name })
}

/** POST è¯·æ±‚ */
export const login = (params: LoginParams) => {
  const { username, password } = params
  // æž„造新的请求参数，避免直接修改原始对象
  const requestData = {
    username,
    password,
    clientId,
    tenantId: DEFAULT_TENANT_ID,
    grantType: GRANT_TYPE,
  }
  return http.post<any>('/auth/login', requestData)
}

 eims-ui-mobile/src/store/access.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,79 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'

type AccessToken = null | string
const initState = {
  access_codes: [],
  access_menus: [],
  access_routes: [],
  access_token: null,
  is_access_checked: false,
  login_expired: false,
  refresh_token: null,
}

interface AccessInfo {
  /**
   * æƒé™ç 
   */
  access_codes: string[]
  /**
   * å¯è®¿é—®çš„菜单列表
   */
  access_menus: string[]
  /**
   * å¯è®¿é—®çš„路由列表
   */
  access_routes: string[]
  /**
   * ç™»å½• accessToken
   */
  access_token: AccessToken
  /**
   * æ˜¯å¦å·²ç»æ£€æŸ¥è¿‡æƒé™
   */
  is_access_checked: boolean
  /**
   * ç™»å½•æ˜¯å¦è¿‡æœŸ
   */
  login_expired: boolean
  /**
   * ç™»å½• accessToken
   */
  refresh_token: AccessToken
}

export const useAccessStore = defineStore(
  'access',
  () => {
    const accessInfo = ref<AccessInfo>({ ...initState })

    const setAccessInfo = (val: AccessInfo) => {
      accessInfo.value = val
    }
    const setAccessToken = (val: AccessToken) => {
      accessInfo.value.access_token = val
    }

    const clearAccessInfo = () => {
      accessInfo.value = { ...initState }
    }
    // ä¸€èˆ¬æ²¡æœ‰reset需求，不需要的可以删除
    const reset = () => {
      accessInfo.value = { ...initState }
    }
    const isLogined = computed(() => !!accessInfo.value.access_token)

    return {
      accessInfo,
      setAccessInfo,
      setAccessToken,
      clearAccessInfo,
      isLogined,
      reset,
    }
  },
  {
    persist: true,
  },
)

 eims-ui-mobile/src/store/index.ts

@@ -15,3 +15,4 @@

// æ¨¡å—统一导出
export * from './user'
export * from './access'

 eims-ui-mobile/src/style/index.scss

@@ -16,3 +16,23 @@
  // ä¿®æ”¹æŒ‰é’®èƒŒæ™¯è‰²
  // --wot-button-primary-bg-color: green;
}

// base文字颜色
.text-color-base {
  color: $uni-text-color;
}
.text-color-gray {
  color: $uni-text-color-grey;
}

// å›¾æ ‡é¢œè‰²
.icon-color-base {
  color: $uni-color-primary;
}

.bg-base {
  background: $uni-bg-color-grey;
}




 eims-ui-mobile/src/uni.scss

@@ -16,7 +16,7 @@
/* é¢œè‰²å˜é‡ */

/* è¡Œä¸ºç›¸å…³é¢œè‰² */
$uni-color-primary: #007aff;
$uni-color-primary: #4D80F0;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

 eims-ui-mobile/src/utils/http.ts

@@ -14,11 +14,18 @@
        // çŠ¶æ€ç  2xx，参考 axios çš„设计
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 2.1 æå–核心数据 res.data
          resolve(res.data as IResData<T>)
          if ((res.data as IResData<T>).code === 200) {
            resolve((res.data as IResData<T>).data as IResData<T>)
          } else {
            uni.showToast({
              icon: 'none',
              title: (res.data as IResData<T>).msg || '请求错误',
            })
          }
        } else if (res.statusCode === 401) {
          // 401错误  -> æ¸…理用户信息，跳转到登录页
          // userStore.clearUserInfo()
          // uni.navigateTo({ url: '/pages/login/login' })
          uni.navigateTo({ url: '/pages/login/index' })
          reject(res)
        } else {
          // å…¶ä»–错误 -> æ ¹æ®åŽç«¯é”™è¯¯ä¿¡æ¯è½»æç¤º

 eims-ui-mobile/vite.config.ts

@@ -43,6 +43,7 @@
    VITE_SHOW_SOURCEMAP,
    VITE_APP_PROXY,
    VITE_APP_PROXY_PREFIX,
    VITE_APP_CLIENT_ID,
  } = env
  console.log('环境变量 env -> ', env)