初始化对接API上一篇文章完成了项目初始化，不过那只是对vue-admin-template模板的简单初始化，tagsview添加了标签快捷导航栏，其他没变。本文以后端、登录、注销、基础表列表接口数据请求完成Jwttoken认证。先看效果。其实看起来和第一篇的初始化效果差不多。唯一不同的是，第一篇的初始化接口依然使用Mock接口，而本文是对接后台FastAPI接口。先看接口文档，一共对接了几个接口，接口格式等。修改vue后台模板代码。多处结合文档和代码，基本可以解决问题。vue-element-admin使用文档https://panjiachen.github.io/...接口请求地址修改首先查看axios包，查看axios打包的对象的baseURL地址。baseURL:process.env.VUE_APP_BASE_API,//url=baseurl+requesturl可以看到address变量是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接口请求地址，然后查看请求方式是否和后台一致，查看调用处的请求参数。比如修改后的导出函数login(data){returnrequest({url:'/auth/login/access-token',method:'post',data})}有统一拦截设置文档和代码的说明。后台传入数据格式如下格式{"code":200,"data":"数据（可嵌套多个字段）","message":"提示信息",}由于我的后台规定都成功了，code都是200，所以在axios拦截器中，把成功条件改成200，拦截所有不是200的，然后弹出一个信息作为提示。JWT认证登录查看代码src/views/login/index.vue首先理清登录逻辑流程。先验证数据，再dispatch到Vuex异步发送请求。1验证数据验证数据导入import{validUsername}from'@/utils/validate'。我后台规定用的邮箱是账号登录，所以改验证账号验证邮箱。/***@param{string}str*@returns{Boolean}*///这是之前的验证用户名只能是admin和editorexportfunctionvalidUsername(str){constvalid_map=['admin','editor']returnvalid_map.indexOf(str.trim())>=0}/***@param{string}str*@returns{Boolean}**///这是一个新的验证邮件导出函数validEmail(str){constemailReg=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/returnemailReg.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"}}然后在我的头字段验证接口中添加令牌验证逻辑所以去修改axios拦截器//requestinterceptorservice.interceptors.request.use(config=>{//在发送请求之前做一些事情if(store.getters.token){//让每个请求都携带token//['X-Token']为自定义headerskey//请根据实际情况修改config.headers['token']=getToken()//此处X-Token改为token前后端协商}returnconfig},error=>{//处理请求错误console.log(error)//用于调试returnPromise.reject(error)})基本日志记录完成。请求用户信息并登录后，可以看到发送了请求的用户信息。其实这里的逻辑写在路由拦截src/permission.js中，看返回值如何保存，去Vuex中查看src/store/modules/user.js，请求在actions中异步处理后，发送请求，获取到用户数据后，将用户数据保存在committomutationsconst{nickname,avatar}=data//这里我返回昵称所以修改commit('SET_NAME',nickname)commit('SET_AVATAR',头像）个人主页修改1创建个人主页页面根据项目样式，在src/views/文件夹下，创建profile文件夹，然后创建vue组件，添加一个h2标签个人中心作为标记2添加个人centerrouting路由格式参考文档：https://panjiachen.gitee.io/v...//personalcenter{path:'/profile',//路由地址component:Layout,redirect:'/profile/index',hidden:true,//侧边栏不显示children:[{path:'index',component:()=>import('@/views/profile/index'),name:'Profile',meta:{title:'PersonalCenter',icon:'user',noCache:true}}]}3修改头部信息src/layout/components/Navbar，删除其余路由，修改为
