Vben Admin 教學 – Ladesign 技術筆記

安裝部屬

git clone https://github.com/vbenjs/vue-vben-admin.git  
pnpm install
pnpm run dev

理論上這樣就可以在本地打開測試環境

但是這沒用啊～我們要使用這個系統是要接我們自己的API的所以我們要將路徑和環境改成我們自己的

修改環境

step1 API 環境設定

預設他是用 mock 模擬，我們要將他換掉，如果是在測試開發環境的話請前往.env.development
將 VITE_GLOB_API_URL 變數改成我們自己的，例如我自己在本機的 8000 是API 所以

VITE_GLOB_API_URL=http://localhost:8000/

step2 修改登入頁面

跟登入有關的他都會放在 sys相關的資料夾，例如登入頁的 vue src/views/sys/login/LoginForm.vue
這裡要調整的是

      const userInfo = await userStore.login({
        password: data.password,
        username: data.account,
        mode: 'none', //不要默认的错误提示
      });

這邊要改成自己的參數名稱

step3 修改 API

我們剛剛提到登入相關的都會放在 sys 相關的資料夾，所以按照這個線索我們可以找到
src/api/sys/user.ts
這個檔案就會有我們要的 loginApi 這個

enum Api {
  Login = '/login',
  Logout = '/logout',
  GetUserInfo = '/getUserInfo',
  GetPermCode = '/getPermCode',
  TestRetry = '/testRetry',
}

/**
 * @description: user login api
 */
export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
  return defHttp.post<LoginResultModel>(
    {
      url: Api.Login,
      params,
    },
    {
      errorMessageMode: mode,
    },
  );
}

這邊的話可以注意一下，API 的輸入有被 LoginParams 設定，而輸出被 LoginResultModel 鎖定。如果要修改的話可以去
src/api/sys/model/userModel.ts 中調整
我自己是直接把他解除綁定啦！不會出問題，就是很不嚴謹

step3 修改 ajax 封裝

理論上這樣改好以後就可以用了～如果你的API回傳的結構跟 mock 那邊的設定都一樣的話，那應該是沒問題。偏偏我的不是，所以我們要去改一下 ajax 的封裝邏輯src/utils/http/axios/index.ts

//  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
    const { code, result, message } = data;
    const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;

這段可以多試幾次直到抓到值可以回傳

step4 sotre 中寫入 token

當我們送出 api 然後成功取回資料後要寫入 token 才能繼續下去
src/store/modules/user.ts

async login(
      params: LoginParams & {
        goHome?: boolean;
        mode?: ErrorMessageMode;
      },
    ): Promise<GetUserInfoModel | null> {
      try {
        const { goHome = true, mode, ...loginParams } = params;
        const data = await loginApi(loginParams, mode);
        const { token } = data;

        // save token
        this.setToken(token);
        return this.afterLoginAction(goHome);
      } catch (error) {
        return Promise.reject(error);
      }
    },

這邊要確認 token 的變數要跟你的 key 值相同，才有辦法寫入token

step5 用 token 取得使用者內容

vben admin 會判斷 token 有效才會真正登入可以進入
src/api/sys/user.ts
在這邊找到 getUserInfo 這個 function 改成自訂的 token 取值 api

大功告成

下載路徑

http://https://github.com/vbenjs/vue-vben-admin

教學文件

http://https://jacobhsu.github.io/vue-vben-admin-docs/components/introduction.html

Vben Admin 教學 <初始設定 login api>