本文所用vue-cli是0版本的，所以首先需要创建一个vuconfijs文件，然后配置axios，就可以请求接口获取数据了。一简单实现前端调用后端接口：maijs文件中：
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '请求地址';//后端开发环境地址
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头信息。
//axios.defaults.headers.common['accessToken'] = 'FA4C308D5E8F6409E01344ADDAEB4C71';
vuconfijs文件完整代码
在logivue中使用
this.$axios({
method: 'post',
url: '/user/login',
contentType: 'application/json;chart=utf-8',
dataType: 'json',
data,
}).then((res) => {
if (res.data.status === '1') {
this.$Message.info('登录成功！');
this.logining = false;
window.sessionStorage.setItem('userSession', res.data.data.id);
window.sessionStorage.setItem('userName', res.data.data.userName);
this.$router.push({ path: '/open/default' });
} else {
this.$Message.info('登录失败！');
this.logining = false;
this.modelLogin.password = '';
}
});
以上即可实现前端调用后端接口。
二实现拦截器和路由登录拦截功能以下为进阶版，将所有的接口调用放在一个user.js文件中(该文件处于http文件夹下)以后其他接口均可放在里面：
import axios from '../interceptors.js'
// 登录
export const login = (data) => {
return axios({
url: '/user/login',
method: 'post',
data
})
}
// 查看用户有没有登录
export const getSession = (data) => {
return axios({
url: '/user/getSession',
method: 'post',
data
})
}
Vue+axios实现http拦截+router路由拦截(双拦截)！！！首先建文件夹http文件夹下简历一个文件interceptors.js:
/*拦截器*/
import axios from 'axios'
import Vue from 'vue'
import {
Message,
LoadingBar
} from 'view-design'
Vue.prototype.HOST = '/api'
// Vue.prototype.$http = axios
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://localhost:8080/c';//后端开发环境地址
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头信息
// 超时时间
axios.defaults.timeout = 12000
// http请求拦截器
axios.interceptors.request.use(config => {
LoadingBar.start();
return config
}, error => {
LoadingBar.error();
Message.error({
message: '加载超时'
})
return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => { // 响应成功关闭loading
LoadingBar.finish();
return data
}, error => {
LoadingBar.error();
Message.error({
message: '加载失败'
})
return Promise.reject(error)
})
export default axios
maijs文件不需要再引入axios了。在需要使用接口的vue文件中如此用：
import { login } from '../http/api/user'
login()
{
const { userName, password } = this.modelLogin;
if (!userName) {
this.$Message.info('用户名不能为空');
return;
}
if (!password) {
this.$Message.info('密码不能为空');
return;
}
this.clearLocalStorage();
this.logining = true;
let data = {
userName: this.modelLogin.userName,
password: this.modelLogin.password,
};
login(data).then(res => {
if (res.data.status === '1') {
this.$Message.info('登录成功！');
this.logining = false;
window.localStorage.setItem('userSession', res.data.data.id);
window.localStorage.setItem('userName', res.data.data.userName);
this.$router.push({ path: '/open/default' });
} else {
this.$Message.info('登录失败！');
this.logining = false;
this.modelLogin.password = '';
}
})
.catch(() => {
this.logining = false;
})
}
登录路由拦截功能:router文件夹下的index.js文件中：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
import Login from '../components/Login.vue'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
meta: {
requireAuth: false, // 添加该字段，为true表示进入这个路由是需要登录的
},
component: Home,
redirect: '/open/default'
},
{
path: '/open/default', //到时候地址栏会显示的路径
meta: {
requireAuth: true, // 添加该字段，为true表示进入这个路由是需要登录的
},
name: 'Home',
component: Home // Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.
},
{
path: '/open/Login',
meta: {
requireAuth: false,
},
name: 'Login',
component: Login
}
],
mode: 'hash'
})
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断是否需要登录权限
if (localStorage.getItem('userSession')) { // 判断是否登录
next()
} else { // 没登录则跳转到登录界面
next({
path: '/open/Login',
query: {
redirect: to.fullPath
}
})
}
} else {
next()
}
})
export default router
以上即可实现路由登录检查；
三解决Vue重复点击相同路由，出现Uncaught(inpromisNavigationDuplicated:Avoidedredundantnavigation问题只需要在以上router文件夹的index.js中增加：
文章为作者独立观点，不代表 股票程序化软件自动交易接口观点
相关文章
股民评论