```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. python调用shell命令

    1.subprocess介绍 官方推荐 subprocess模块,os.system(command) 这个废弃了 亲测 os.system 使用sed需要进行字符转义,非常麻烦 python3 su ...

  2. iOS-检测网络可连接性

    #pragma mark - 监测网络的可链接性+ (void)netWorkReachabilityWithURLString:(NSString *)strUrl{    AFHTTPReques ...

  3. jvm minor gc 为什么比 full gc 快很多

    1.minor gc 也需要STW,只不过正常情况下 minor gc  STW时间非常短,所以很多人误以为没有STW. 这里的正常情况是,Eden 区产生的新对象大部分被回收了,不需要拷贝. 2.M ...

  4. nginx限流方案的实现(三种方式)

    通过查看nginx官方文档,小弟查看到了三种nginx限流方式. 1.limit_conn_zone 2.limit_req_zone 3.ngx_http_upstream_module 前两种只能 ...

  5. Flutter布局--appbar导航栏和状态栏

    MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. back ...

  6. Android_7.1.1_r6源码编译

    上篇文章讲述了如何下载Android源码,在篇文章就来说一说Android源码编译.其实一般来说如果修改的软件和底层没什么关系,直接提取相应的源代码到Android Studio编译就可以了,如果是与 ...

  7. MyBatis框架总结

    一. MyBatis简介 MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果集的检索.MyBati ...

  8. Ext this.getView(...).saveDocumentAs is not a function

    一.前言 Ext 导出数据,根据官网的代码,报:this.getView(...).saveDocumentAs is not a function 的问题. 参考:Ext Export not wo ...

  9. Java使用icepdf转高清图片

    <dependency> <groupId>org.icepdf.os</groupId> <artifactId>icepdf-core</ar ...

  10. PAT甲级 排序题_C++题解

    排序题 PAT (Advanced Level) Practice 排序题 目录 <算法笔记> 6.9.6 sort()用法 <算法笔记> 4.1 排序题步骤 1012 The ...