【Vue后台管理二】vue-admin-template 对接后端API JWT认证

摘要:
在初始化对接终端API一节中,项目初始化已完成,但这只是vue-admin模板模板的简单初始化。添加了标记视图标记快捷导航栏,其他内容均未更改。在本文之后,您已经完成了Jwttoken身份验证、登录、退出以及与后端的基本表列表接口数据请求。首先看效果。事实上,初始化效果似乎与第一章类似。唯一的区别是,第一章仍然使用Mock接口进行初始化,而本章是后台Fa进行对接
初始化对接端台API

上一篇了完成了项目初始化,但是那个只是把 vue-admin-template 模版简单的初始化了一下,新增了tagsview标签快捷导航栏,其他的没什么变化。

这一篇了就完成了和后端的Jwt token认证,登录,退出,基本的table list接口数据请求。首先看看效果。
后台效果演示

其实看起来和第一篇的初始化效果差不多,唯一的区别是,第一篇初始化接口还是用的Mock接口, 而这一篇是对接的后台FastAPI接口。

接口文档

首先看看,一共对接了几个接口, 接口格式等。
API文档

修改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)

个人主页修改

// 个人中心
  {
    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

免责声明:文章转载自《【Vue后台管理二】vue-admin-template 对接后端API JWT认证》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇windows操作报错:无法启动此程序,因为计算机中丢失api-ms-win-core-winrt-string-l1-1-0.dll前端规范标准(一)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【python】threadpool的内存占用问题

先说结论: 在使用多线程时,不要使用threadpool,应该使用threading, 尤其是数据量大的情况。因为threadpool会导致严重的内存占用问题! 对比threading和threadpool的内存占用 # coding=utf-8 import time import os import psutil import json...

最新的一波Vue实战技巧,不用则已,一用惊人

在Vue中,不同的选项有不同的合并策略,比如 data,props,methods是同名属性覆盖合并,其他直接合并,而生命周期钩子函数则是将同名的函数放到一个数组中,在调用的时候依次调用 在Vue中,提供了一个api, Vue.config.optionMergeStrategies,可以通过这个api去自定义选项的合并策略。 在代码中打印 consol...

VUE内使用RSA加解密

说明:为防止私钥泄漏,由服务端生成两对密钥,分别是(前端公钥+私钥,后端公钥加私钥),采用加解密模式为:前端使用后台公钥加密,使用前端私钥解密;后端使用前端公钥加密,使用后端私钥解密。前后端统一使用公钥加密,私钥解密 一、现在vue项目中安装依赖包jsencrypt   npm install jsencrypt --save-dev 二、在项目中新建js...

vue按键修饰符@keyup.enter.native

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 应用场景: 1、当我们在登录页面中,输完密码后,点击enter键就可以发起登录请求 <!-- 登录表单区...

微信小程序post请求和get请求

wx.request({ url: 'https://URL', //这里''里面填写你的服务器API接口的路径 data: {}, //这里是可以填写服务器需要的参数 method: 'GET', // 声明GET请求 // header: {}, // 设置请求的 header,GET请求可以不填...

如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页

最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了一段时间会自动清空cookie。 经过我查资料,自身尝试网上的各种方法,发现都有问题。 总结这一路的尝试: 一、页面加载时只执行onload ,页面关闭时只执...