在Vue路由器导航保护中使用axios
在Vue路由器导航保护中使用axios
提问于 2020-12-29 12:54:20
我不能使用我的Vue.prototype.$http，因为我不知道如何使它在我的路由文件中可用。
axios.js
import Vue from 'vue';
import axios from 'axios';
// noinspection JSIncompatibleTypesComparison
const isDevelopmentMode = process.env.NODE_ENV === 'development';
// base URL for backend access
const backendUrl = (isDevelopmentMode)
? 'http://localhost:8081/'
: '/backend/';
// register axios as HTTP client
Vue.prototype.$http = axios.create({
baseURL: backendUrl,
withCredentials: isDevelopmentMode,
});index.js // Vue路由器
import Vue from 'vue';
import VueRouter from 'vue-router';
import '@/plugins/axios';
Vue.use(VueRouter);
function getSession() {
const session = this.$http.get('session/info')
.then((response) => response.data);
return session;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-29 14:38:03
this.$http将无法工作，因为routes.js中的this指针与视图组件中的this指针不同。在routes.js中试试这个
console.log(this)
然后在像App.vue这样的Vue组件中尝试同样的方法。您将在routes.js中看到这是指路由器，而不是Vue.prototype。
我建议像这样修改您的axios.js，添加一个实例变量并导出它。
import Vue from 'vue';
import axios from 'axios';
// noinspection JSIncompatibleTypesComparison
const isDevelopmentMode = process.env.NODE_ENV === 'development';
// base URL for backend access
const backendUrl = (isDevelopmentMode)
? 'http://localhost:8081/'
: '/backend/';
// register axios as HTTP client
const instance = axios.create({
baseURL: backendUrl,
withCredentials: isDevelopmentMode,
});
Vue.prototype.$http = instance;
export default instance // we need to export this然后将实例变量导入routes.js (它将是同一个变量)
import Vue from 'vue';
import VueRouter from 'vue-router';
import instance from '@/plugins/axios'; // this may be a different path?
Vue.use(VueRouter);
function getSession() {
const session = instance.get('session/info') // use instance here
.then((response) => response.data);
return session;
}Stack Overflow用户
发布于 2020-12-29 14:41:29
在axios.js中导入router.js。为此，请执行以下步骤：
- 导出axios对象.
axios.js
import axios from 'axios';
let ax= axios.create({
baseURL: backendUrl,
withCredentials: isDevelopmentMode,
});
Vue.prototype.$http = ax;
export default ax;- Import axios.js in router.js.
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from "./axios.js"
Vue.use(VueRouter);
function getSession() {
const session = axios.get('session/info')
.then((response) => response.data);
return session;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65492471
复制相关文章
相似问题
腾讯云开发者
