乐趣区

Vue后台管理二vueadmintemplate-对接后端API-JWT认证

jiezi

初始化对接端台 API

上一篇了实现了我的项目初始化，然而那个只是把 vue-admin-template 模版简略的初始化了一下，新增了 tagsview 标签快捷导航栏, 其余的没什么变动。

这一篇了就实现了和后端的 Jwt token 认证，登录，退出，根本的 table list 接口数据申请。首先看看成果。

其实看起来和第一篇的初始化成果差不多，惟一的区别是，第一篇初始化接口还是用的 Mock 接口，而这一篇是对接的后盾 FastAPI 接口。

接口文档

首先看看，一共对接了几个接口, 接口格局等。

批改 Vue 后盾模版代码

很多中央文档和代码联合着看，根本都能解决问题。
vue-element-admin 应用文档 https://panjiachen.github.io/…

接口申请地址批改

首先查看 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/v…

// 集体核心
  {
    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/arti…

退出移动版