```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//清除默认样式
import axios from 'axios' //因为Vue的底层原理也是往js原型上挂载方法,所以我们可以把axios挂载在全局
Vue.prototype.$http = axios;
// 全局配置baseURL
axios.defaults.baseURL = 'http://www.litc.pro:9999/v1';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
let token = localStorage.getItem('token')||''
config.headers.Authorization = token
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
//console.log(response.data)
response = response.data
return response;
}, function (error) {
// 对响应错误做点什么
Vue.prototype.$message({
showClonse:true,
type:'error',
message:error.response.data.errMsg
})
return Promise.reject(error);
});
//导航守卫
router.beforeEach((to,from,next)=>{
let token = localStorage.getItem('token') || ''
//拦截已登录的状态
//console.log(to.path)
//如果你没有token 并且去的不是signin页面
if(token && to.path === '/signIn'){
return next('/home')
}
if(token || to.path === '/signIn'){
next()
}else{
//如果没有登录,就跳转回 /
next('/')
}
})
Vue.config.productionTip = false new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```

  

vue拦截的更多相关文章

  1. vue拦截器Vue.http.interceptors.push

    刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next ...

  2. vue拦截器实现统一token,并兼容IE9验证

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...

  3. vue 拦截器

    拦截器:请求发送之前和请求返回之后的处理 使用:1.config---dev.env.js 开发环境配置 2. prod.env.js 生产 API:'http://www.wpdic.com' 3. ...

  4. Vue 拦截器的使用

    拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( req ...

  5. vue拦截器

    1.在路由添加 meta:{ requireAuth:true } 完整 { path: '/xx', name: 'xx', component: xx, meta:{ requireAuth:tr ...

  6. vue -resource 文件提交提示process,或者拦截处理

    this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...

  7. Vue实战狗尾草博客管理系统第一章

    Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...

  8. 04 DRF内容回顾、用户登录 (含跨域) (vuex vue-cookie)、用户认证 (Auth认证)(拦截器)

    1.内容回顾 1.视图中常见的继承 2.频率访问控制源码 3.序列化,反序列化 2.初始化代码 1.后端代码:AuthView (1)目录结构 (2)urls (3)view (4)注释掉cors ( ...

  9. Element-ui实现loading的局部刷新

    后台管理系统loading的局部刷新 在一次vue+element-ui后台管理系统的项目中,遇到这样一个问题,引入element-ui加载框后,loading会占满整个屏幕,虽然通过改变路由实现了局 ...

随机推荐

  1. MERN——MongoDB && React && Node && Express

    原文链接:Let’s build a full stack MongoDB, React, Node and Express (MERN) app github源码地址:jelorivera08/re ...

  2. APP手工项目02-用例编写-测试报告-fiddler弱网测试

    回顾 APP专项测试(兼容性,安装,卸载,升级,交叉事件,PUSH消息,性能,其他类型) 项目环境(开发环境,测试环境,准生产环境,生产环境) APP内测发布平台(蒲公英,fir.im)支持apk,i ...

  3. using 关键字有两个主要用途

    转自:https://www.jianshu.com/p/5357dc4efcf8 using 关键字有两个主要用途: (一).作为指令,用于为命名空间创建别名或导入其他命名空间中定义的类型. (二) ...

  4. PYTHON指定国内PIP源

    一.LINUX: vi ~/.pip/pip.conf 输入内容: [global]index-url = http://pypi.douban.com/simple/[install]trusted ...

  5. 01.轮播图之五 :一个 imageView也能 作 轮播

    这个是最近才写的,本以为实现起来很有难度,需要更高深的理论, 写完之后,才发现自己错误的离谱: 之所以能用一个imageview 实现轮播 基于两点::: 使用 imageview 的layer 层设 ...

  6. webpack简单配置

    1.代理配置 需要修改一下配置文件 config里的index.js,根据接口特点自主选取 2.解决图标显示路径错误问题 项目在打包完成后如果出现图片显示不了的问题,需要进行如下配置

  7. 菜单特效jq

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. K8S从入门到放弃系列-(2)集群根证书准备

    k8s从1.8版本开始,集群中各个组件需要使用TLS证书对通信进行加密,每个k8s集群都需要有独立的CA证书体系,这里我们采用比较常用的CloudFlare 的 PKI 工具集 cfssl 来生成 C ...

  9. Windows Terminal Preview v0.7 Release

    Windows Terminal Preview v0.7 Release The following key bindings are included by default within this ...

  10. [DEBUG] ubuntu pip安装成功却无法import

    我的pip经常出问题,我也不知道为啥..今天搞啥啥坏=.= 问题: pip自动安装显示成功,在交互环境下却无法import ==========================踩坑========== ...