1,引入axios
import axios from 'axios';
Vue.prototype.$http = axios;
2,axios拦截
// axios 配置
axios.defaults.timeout = 8000;
axios.defaults.baseURL = 'https://api.github.com';
// http request 拦截器
axios.interceptors.request.use(
config => {
if (localStorage.token) { //判断token是否存在
config.headers.token = localStorage.token; //将token设置成请求头
}
return config;
},
err => {
return Promise.reject(err);
}
);
// http response 拦截器
axios.interceptors.response.use(
response => {
if (response.data.errno === 999) {
router.replace('/login');
console.log("token过期");
}
return response;
},
error => {
return Promise.reject(error);
}
);
3,vue router
在vue-router 的router.js里面配置修改如下
给每个要登录的都添加上meta.needlogin
{
path: '/',
name: 'home',
component: Home,
meta: {
needLogin: true
}
},
4,vue-router每次跳转页面时判断
// router配置
router.beforeEach((to, from, next) => {
// 获取用户登录成功后储存的登录标志
let jobNo = localStorage.getItem('jobNo')
// 如果是已经登陆状态
if (jobNo !== null) {
next()
} else {
// 判断是否需要登陆
if (to.meta.needLogin === true) {
router.push('/login')
} else {
next()
}
}
})
5,然后就可以愉快的使用啦