Vue-Axios-使用JwtToken
打开项目:Vue.Demo
【Vue-Axios-使用JwtToken】新增一个axios.js
import Vue from 'vue';
import axios from 'axios';
import store from '../store';
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://localhost:5004/api';
axios.defaults.headers.common['Authorization'] = "Bearer " + store.state.oidcStore.access_token;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
config.headers.Authorization = "Bearer " + store.state.oidcStore.access_token;
console.info(config);
return config;
}, function(error) {
return Promise.reject(error);
});
export default axios
Home.vue 使用:axios
to welcome
Name:{{product.name | capitalize}}Leves:
Lazy
showPrice:{{product.price}}
ComputedResult:{{total}}Search:
- {{index}}{{item}}
查看Http请求:
文章图片
现在完整的演示一遍:
1.启动认证服务
2.启动Api服务
3.启动Node服务
3.1 登录
3.2 调用授权Api
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页,计算网页数据大小