【Vue后台管理二】vue-admin-template 對接后端API JWT認證

初始化對接端台API

上一篇了完成了項目初始化，但是那個只是把 vue-admin-template 模版簡單的初始化了一下，新增了tagsview標簽快捷導航欄,其他的沒什么變化。

這一篇了就完成了和后端的Jwt token認證，登錄，退出，基本的table list接口數據請求。首先看看效果。

其實看起來和第一篇的初始化效果差不多，唯一的區別是，第一篇初始化接口還是用的Mock接口， 而這一篇是對接的后台FastAPI接口。

接口文檔

首先看看，一共對接了幾個接口, 接口格式等。

修改Vue后台模版代碼

很多地方文檔和代碼結合着看，基本都能解決問題。
vue-element-admin使用文檔 https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

接口請求地址修改

首先查看axios封裝，查看axios封裝的對象baseURL地址。

baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url

可以看到地址變量是 VUE_APP_BASE_API，如果有點經驗的話，項目文件很明顯, 有個.env.development的文件，點開里面就有VUE_APP_BASE_API直接修改為
VUE_APP_BASE_API = 'http://127.0.0.1:8010/api/admin/v1', 實在不知道，還可以全局搜索，這樣的配置文件一般全局唯一。

修改src/api/user 還有table接口請求地址, 然后查看請求方式是否和后台一致，請求參數在調用的地方查看。
如登錄修改后的

export function login(data) {
  return request({
    url: '/auth/login/access-token',
    method: 'post',
    data
  })
}

統一攔截設置 文檔和代碼都有說明，規定了后台傳入數據的格式為以下格式

{
      "code": 200,
      "data": "數據(可以多個字段嵌套)"，
      "message": "提示信息",
}

由於我后台規定成功，code都為200， 所以在axios攔截器里面，把成功條件修改為200， 不為200的都攔截，然后彈出message作為提示。

JWT認證登錄

查看代碼src/views/login/index.vue
先理清登錄邏輯流程。先驗證數據，然后dispatch到Vuex里面異步發送請求。

• 1 驗證數據
  驗證數據是導入的 import { validUsername } from '@/utils/validate'
  我后台規定, 使用的郵箱為賬號登錄的，所以更改驗證賬號,為驗證郵箱地址。

/**
 * @param {string} str
 * @returns {Boolean}
 */
// 這是之前驗證username 只能為 admin 和 editor
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}
/**
 * @param {string} str
 * @returns {Boolean}
 * */
// 這是新增的驗證郵箱的函數
export function validEmail(str) {
  const emailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
  return emailReg.test(str)
}

然后更改對應的驗證邏輯， 最后在去Vuex里面src/store/modules/user.js查看請求的邏輯。
請求成功后，把返回數據data.token保存到vuex 和 cookie里面各存了一次。

只是我登錄成功后的接口返回值，本來是返回的access_token字段的，后面改為token

{
  "code": 200,
  "message": "Success",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1OTUxNDIzMzQsInN1YiI6IjQifQ.3pdVG5eJIdNyNOdFiJG4GvQ9Y7bij73nW6UBBhL8b94",
    "token_type": "Bearer"
  }
}

然后我驗證接口的邏輯是 在headers里面添加 token字段驗證。
所以要去修改axios攔截器

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['token'] = getToken()    // 這里的X-Token改為token 前后端協商
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

基本的登錄就完成了。

請求用戶信息

登錄完之后，就看到發送了請求用戶信息.
其實邏輯寫在這里在路由攔截 src/permission.js
查看如何保存的返回值， 去Vuex里面查看src/store/modules/user.js,
actions里面異步處理完請求后， 發送了請求， 獲取到用戶數據后，在commit 到 mutations 保存用戶數據

const { nickname, avatar } = data  // 這里我返回的是nickname 所以修改

commit('SET_NAME', nickname)
commit('SET_AVATAR', avatar)

個人主頁修改

• 1 創建個人主頁頁面
  按照項目風格，在src/views/文件夾下，創建profile文件夾，然后創建一個vue組件，添加一個h2標簽 個人中心作為標記
• 2 添加個人中心路由
  路由格式參考文檔: https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html#配置項

// 個人中心
  {
    path: '/profile',   // 路由地址
    component: Layout,
    redirect: '/profile/index',
    hidden: true,    // 不顯示在側邊欄
    children: [
      {
        path: 'index',
        component: () => import('@/views/profile/index'),
        name: 'Profile',
        meta: { title: '個人中心', icon: 'user', noCache: true }
      }
    ]
  }

• 3 修改頭部信息
  src/layout/components/Navbar
  刪掉其余的路由, 修改為

<router-link to="/">
       <el-dropdown-item>
            首頁
      </el-dropdown-item>
</router-link>
<router-link to="/profile">
      <el-dropdown-item>
        我的主頁
      </el-dropdown-item>
</router-link>
<el-dropdown-item divided @click.native="logout">
      <span style="display:block;">退出</span>
</el-dropdown-item>

測試Table list數據

那個修改邏輯和上面差不多

到這里差不多就完全初始化好了。

代碼GitHub地址

見個人網站 https://www.charmcode.cn/article/2020-07-11_Vue_Jwt_FastAPI