```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. 21Flutter Drawer侧边栏、以及侧边栏内容布局

    Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart'; import 'tabs/Category.dar ...

  2. 阶段5 3.微服务项目【学成在线】_day18 用户授权_06-方法授权-方法授权测试-无权限异常处理

    现在没权限返回的信息 控制台抛出的异常是这个 : 不允许访问,这是Spring Security跑出来的 我们在异常处理器里面打个断点看一下 重新测试,就跳转到了异常捕获类这里. 这是异常的类型 这里 ...

  3. java判断请求是否ajax异步请求

    java判断请求是否ajax异步请求   解决方法: if (request.getHeader("x-requested-with") != null && re ...

  4. Mysql主从复制(重置版)

    MySQL Replication是Mysql自带的一种功能,可以实现将数据从一台数据库服务器(master)复制到一台或多台数据库服务器(slave),默认情况下属于异步复制,无需维持长连接.通过配 ...

  5. 返回日期格式:2017-12-03T13:58:58.901Z,判断时间间隔 如 “刚刚”,“一分钟前”,“一小时前”等

    后台返回的格式如下: 实现输出如下: 我的处理如下: // 处理数据 2017-11-28T02:41:09.487Z // 请求的时间戳.日期格式按照ISO8601标准表示,并需要使用UTC时间. ...

  6. 【嵌入式硬件Esp32】ESP32学习之在windows下搭建eclipse开发环境

    一.所需工具 由于项目要用ESP32模块进行开发,折腾了下集成开发环境,现将过程记录下来,以便需要的人使用.其中需要的有交叉编译工具,esp-idf示例代码以及C/C++版的eclipse. 交叉编译 ...

  7. win10 安装MySQL过程和遇到的坑

    环境:win10系统,MySQL5.7.18 “mysql-5.7.18-winx64.msi” 首先是要运行mysql-5.7.18-winx64.msi,选择安装在C盘(可自定义安装) 第一步 打 ...

  8. Vue-cli中的安装方法

    vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1.安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢 ...

  9. 【数据库开发】在Windows上和Linux上配置MySQL的过程

    [数据库开发]在Windows上和Linux上配置MySQL的过程 标签(空格分隔): [编程开发] 首先是在Windows上尝试用QT进行MySQL数据库开发,结果总出现driver不能load的错 ...

  10. Mybatis映射文件sql语句注意事项

    1.插入