要求是每个请求需要将token放入请求头,所以先说设置请求头。
一.设置请求头
src->main下添加这些,代码会贴在后面。
import axios from 'axios'
import VueAxios from 'vue-axios'
axios.defaults.baseURL = '/api'
Vue.use(VueAxios, axios)
Vue.prototype.$axios = axios
import { getToken, setToken, removeToken } from '@/utils/auth'
Vue.prototype.$getToken = getToken
Vue.prototype.$setToken = setToken
Vue.prototype.removeToken = removeToken
保存之后,会出现如下提醒。
只需要按照提醒,npm install --save vue-axios即可。
二.获取后端信息
第一步 登录成功后将token保存本地
src->store->modules->user
const { code, data } = response
if (code === 0) {
localStorage.setItem('token', response.data.token)
console.log('successSetToken')
}
第二步 获取到token
src->views->table->inline-edit-table
第三步 将token拼接到Authorization中
替换为
api改成给你的接口,key1,key2是需要get的参数注意间隔符
fetchData() {
var _this = this
this.$axios({
method: 'get',
url: 'api?' + 'key1&' + 'key2',
headers: {
'Authorization': 'Bearer ' + this.token
}
}).then(respose => {
const code = respose.data.code
if (code === 0) {
this.listLoading = false
_this.list = Array(respose.data.data)
this.form = _this.list[0]
}
})
},
这里如果你不加Array()强制转译的话可能会出现 ,因为我的后台是数据类型,所以改成Array,根据自己需求改。
效果图:
以上,后台数据的查找功能。
如果觉得有帮助,点个赞,有问题可以评论区一起讨论。