```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. cookie和session-csrf防护-中间件

    cookie概念: 是由服务器生成,保存在浏览器端的一小段文本信息. cookie特点: 1) cookie是以键值对进行存储的. 2) 浏览器访问网站时,会将本地保存的跟网站相关的所有cookie发 ...

  2. 五句话搞定Python、JavaScript作用域

    这个银角的看家之作了吧,哈哈哈,剽窃下,原地址在这:点我点我 Python与JavaScript基本相同,但声明提前一项略有不同. JavaScript.Python中无块级作用域 在Java或C#中 ...

  3. ElasticSearch——Curator索引管理

    简介 curator 是一个官方的,可以管理elasticsearch索引的工具,可以实现创建,删除,段合并等等操作.详见官方文档 功能 curator允许对索引和快照执行许多不同的操作,包括: 从别 ...

  4. MS SQL查询所有表行数,获取所有数据库名,表名,字段名

    1.获取所有数据库名 --SELECT Name FROM Master..SysDatabases ORDER BY Name -- 2.获取所有表名: --SELECT Name NAMEtemp ...

  5. Flutter 踩坑之build函数返回了null

    今天遇到一个bug,内容都正常显示没问题,但是控制台里报错,如图: 翻译了下,说是函数不能返回空值,搜索了下,网上相同问题的是少写了个return,我检查了下也没发现少return的,后来突然发现if ...

  6. darknet标签转化为COCO标签

    import sys import json import cv2 import os import shutil dataset = { "info": { "desc ...

  7. 获取radio点击事件

    获取radio点击事件,不能用click(),而是用change(). $('input[name="options"]').change(function(){ console. ...

  8. python-继承之多继承

    class BaseRequest(): pass class RequestHandler(BaseRequest): def serve_forever(self): print('Request ...

  9. Redis 常用命令学四:集合类型命令

    1.增加和删除命令 127.0.0.1:6379> SADD st a (integer) 1 127.0.0.1:6379> SADD st r f g (integer) 3 127. ...

  10. 关于 磁盘 I/O 的工作机制那些事

    总有一些你我看不见的东西,存在与你我周围 <深入分析 javaW 技术内幕> 读书感悟 作者 :淮左白衣 写于2018年4月11日19:35:06 写在前面的话 字节与字符的转换桥梁 用户 ...