这篇文章主要介绍“vue请求接口并携带token如何实现”,在日常操作中,相信很多人在vue请求接口并携带token如何实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue请求接口并携带token如何实现”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
1.在vue2.0的config文件夹下面的index.js文件里面或者在vue3.0中新建vue.config.js文件,写入以下代码:
module.exports = { devServer: { open: true, port: 8080, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: { //配置跨域 '/apis': { target: 'http://47.98.143.163:8000/', //这里后台的地址模拟的;应该填写你们真实的后台接口 ws: true, changOrigin: true, //允许跨域 pathRewrite: { '^/apis': '' //请求的时候使用这个api就可以 } } } }, }
在需要调取接口的方法中通过/apis加上接口来拿取数据,示例如下:
//编辑问卷列表 edit(id) { this.axios .put("/apis/zhmq/wj/wj/" + id + "/", { title: this.inputtitle, explain: this.titletextarea, }) .then((res) => { console.log(121324654); this.centerDialogVisible = false; this.getarr(); }) .catch((e) => fn); }
在调取后端接口时,需要给后端传一个token过去,才可以拿到后端的数据,但是后端没有给我登录接口,让我使用另一个项目登录时的token,结果就是写着写着突然没数据了。。。。,当时写的代码是这样的:
return:{ token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwic2Vzc2lvbl9pZCI6Ijg0MmRlNGQ0LTVkODktNDg0ZC1hMDk1LWMzNTdkNmJmNDRjMSIsImV4cCI6MTYyOTQyNTI4Mywib3JpZ19pYXQiOjE2MjkzMzg4ODN9.AeO5kKdojnF3kjnIfmuShMyEvOvVLavkc4gcUnH9giU" } getlist(){ this.axios .get("/apis/zhmq/wj/wj/display/" + this.titleId + "/", { //添加请求头 headers: { Authorization: "Bearer " + this.token, }, }) .then((res) => { console.log(res); }) .catch((e) => fn); }
导致的结果就是我每调一个接口,就需要把headers复制粘贴一遍,而且token还很快就会过期,实在是难受,就和后端商量让他给我一个登录接口,不然实在是麻烦。。。
首先编写登录页面,同时拿取token,把token存储到vuex中,代码如下:
<template> <div class="login"> <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container" > <h3 class="title" >系统登录</h3> <el-form-item prop="account"> <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号" ></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码" ></el-input> </el-form-item> <el-form-item class="join_formitem"> <el-form-item class="captcha"> <el-col :span="12"> <el-form-item prop="picLyanzhengma"> <el-input type="text" placeholder="请输入验证码" class="yanzhengma_input" v-model="loginForm.picLyanzhengma" /> </el-form-item> </el-col> <el-col class="line" :span="1"> </el-col> <el-col :span="11"> <input type="button" @click="createdCode" class="verification" v-model="checkCode" /> </el-col> </el-form-item> </el-form-item> <el-form-item> </el-form-item> <el-form-item > <!-- <el-button type="primary" @click.native.prevent="reset">重 置</el-button> --> <el-button type="primary" @click="login()" >登 录</el-button > </el-form-item> </el-form> </div> </template> <script> import { mapMutations } from "vuex"; import Cookies from "js-cookie"; export default { name: "login", components: { }, data() { return { code: "", checkCode: "IHLE", data: "", loading: false, loginForm: { account: "admin", password: "123456", captcha: "", src: "", picLyanzhengma: "", }, fieldRules: { account: [{ required: true, message: "请输入账号", trigger: "blur" }], password: [{ required: true, message: "请输入密码", trigger: "blur" }], picLyanzhengma: [ { required: true, message: "请输入验证码", trigger: "blur" }, ], }, checked: false, }; }, methods: { ...mapMutations(["changeLogin"]), login() { this.loading = true; let _this = this; this.axios .post("/apis/admin/login/", { //调取后端登录接口 username: this.loginForm.account, password: this.loginForm.password, }) .then((res) => { console.log(res); console.log(res.data.data.token); _this.userToken = "Bearer " + res.data.data.token; // 将用户token保存到vuex中 _this.changeLogin({ Authorization: _this.userToken }); Cookies.set("Token", res.data.data.token); //登录成功后将token存储在cookie之中 _this.$router.push("/questionnaire"); }); }, reset() { this.$refs.loginForm.resetFields(); }, // 随机验证码 createdCode() { // 先清空验证码输入 this.code = ""; this.checkCode = ""; this.picLyanzhengma = ""; // 验证码长度 const codeLength = 4; // 随机数 const random = new Array( 0,1,2,3,4,5,6,7,8,9,"A", "B","C","D", "E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"); for (let i = 0; i < codeLength; i++) { // 取得随机数的索引(0~35) let index = Math.floor(Math.random() * 36); // 根据索引取得随机数加到code上 this.code += random[index]; } // 把code值赋给验证码 this.checkCode = this.code; }, }, mounted() { this.createdCode(), //创建验证码 }, }; </script> <style lang="scss" scoped> .login { display: flex; justify-content: center; align-items: center; height: 100%; // height: 600px; background-image: url("../../assets/login-background.jpg"); background-size: cover; } .login-container { -webkit-border-radius: 5px; border-radius: 5px; -moz-border-radius: 5px; background-clip: padding-box; margin: 100px auto; width: 350px; padding: 35px 35px 15px 35px; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6; .title { margin: 0px auto 30px auto; text-align: center; color: #505458; } .remember { margin: 0px 0px 35px 0px; } } .yanzhengma_input { font-family: "Exo 2", sans-serif; // border: 1px solid #fff; // color: #fff; outline: none; // border-radius: 12px; letter-spacing: 1px; font-size: 17px; font-weight: normal; // background-color: rgba(82,56,76,.15); padding: 5px 0 5px 10px; // margin-left: 30px; height: 30px; margin-top: 30px; // border: 1px solid #e6e6e6; } .verification { background: white; margin-top: 35px; border-radius: 12px; width: 100px; letter-spacing: 5px; margin-left: 50px; height: 40px; transform: translate(-15px, 0); } .captcha { height: 50px; text-align: justify; } </style>
调取后端登录接口成功,拿到token同时存放到vuex中
在store文件夹下面的index.js文件中,写入以下代码,将token存储到localStorage中:
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { // 存储token Authorization: localStorage.getItem('Authorization') ?localStorage.getItem('Authorization') : '' }, mutations: { // 修改token,并将token存入localStorage changeLogin(state, user) { state.Authorization = user.Authorization; localStorage.setItem('Authorization', user.Authorization); } } }); export default store;
3.因为请求后端接口需要携带token放到请求头headers中,因而在main.js文件中,写入以下代码:
//引入axios import axios from 'axios' //使用axios Vue.prototype.axios = axios //axios携带token // 添加请求拦截器,在请求头中加token axios.interceptors.request.use( config => { if (localStorage.getItem('Authorization')) { config.headers.Authorization = localStorage.getItem('Authorization'); } return config; }, error => { return Promise.reject(error); });
即可在请求接口的时候,可以携带token拿取后端数据,因而调取后端接口就可以省略请求头的添加:
//编辑问卷列表 edit(id) { this.axios .put("/apis/zhmq/wj/wj/" + id + "/", { title: this.inputtitle, explain: this.titletextarea, }) .then((res) => { console.log(121324654); this.centerDialogVisible = false; this.getarr(); }) .catch((e) => fn); }
在main.js后者router文件夹下面的index.js文件里面加入以下代码,进行全局前置路由守卫,代码如下:
router.beforeEach((to, from, next) => { if (to.path == '/login' || to.path == '/register') { next(); } else { const token = localStorage.getItem('Authorization'); // 获取token // token不存在 if (token === null || token === '') { alert('您还没有登录,请先登录'); next('/login'); } else { next(); } } });
完成登录路由拦截以及请求携带请求头
到此,关于“vue请求接口并携带token如何实现”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。