vue拦截
```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拦截的更多相关文章
- vue拦截器Vue.http.interceptors.push
刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next ...
- vue拦截器实现统一token,并兼容IE9验证
项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...
- vue 拦截器
拦截器:请求发送之前和请求返回之后的处理 使用:1.config---dev.env.js 开发环境配置 2. prod.env.js 生产 API:'http://www.wpdic.com' 3. ...
- Vue 拦截器的使用
拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( req ...
- vue拦截器
1.在路由添加 meta:{ requireAuth:true } 完整 { path: '/xx', name: 'xx', component: xx, meta:{ requireAuth:tr ...
- vue -resource 文件提交提示process,或者拦截处理
this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...
- Vue实战狗尾草博客管理系统第一章
Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
- 04 DRF内容回顾、用户登录 (含跨域) (vuex vue-cookie)、用户认证 (Auth认证)(拦截器)
1.内容回顾 1.视图中常见的继承 2.频率访问控制源码 3.序列化,反序列化 2.初始化代码 1.后端代码:AuthView (1)目录结构 (2)urls (3)view (4)注释掉cors ( ...
- Element-ui实现loading的局部刷新
后台管理系统loading的局部刷新 在一次vue+element-ui后台管理系统的项目中,遇到这样一个问题,引入element-ui加载框后,loading会占满整个屏幕,虽然通过改变路由实现了局 ...
随机推荐
- Zabbix4.x 历史数据存储到Elasticsearch7.x
一.简介 Zabbix 3.4.6 版本开始支持历史数据存储到 Elasticsearch, 早就想测试这个功能,最近有个需求需保存 zabbix 的历史数据上达十亿条,因此决定测试这功能的实用性,事 ...
- Day9作业:socket之FTP工具
代码传的太累,直接发个github的链接吧! https://github.com/ccorzorz/Socketserver_FTP 上两张图给抛砖引玉下吧: 后台管理: FTP程序,包括客户端和s ...
- 常用音频格式对应的采样率,每采样点bit数以及比特率
Format SamplesPerSec BitsPerSample BitsPerSec(格式) (采样频率) (每采样点bit数) (比特率或位率)MEDIA_FORMAT_WAV 8kHz 16 ...
- C++ - 第一个程序
代码: #include <iostream> using namespace std; int main() { cout << "hello!" < ...
- 浅谈Delphi高效使用TreeView
本来我一直都是使用递归算法, 效率很低 下边这段代码是我原来写的 ------------------------------------------------------------------- ...
- 【微信小程序】wx.navigateBack() 携带参数返回
第一个页面: go_pick_time:function(e){ var that = this; var type = e.currentTarget.dataset.type; wx.naviga ...
- 在Eclipse Android中设置模拟器屏幕大小
在Eclipse Android中设置模拟器屏幕大小是本文要介绍的内容,主要是来了解并学习Eclipse Android中模拟器的设置,具体关于Eclipse Android内容的详解来看本文. 方法 ...
- Ehcache开启JMX支持
Ehcache提供了基于JMX的监控支持,支持对以下几类信息的监控. CacheManager Cache CacheConfiguration CacheStatistics 按照JMX的规范,为了 ...
- Levenberg-Marquardt迭代(LM算法)-改进Guass-Newton法
1.前言 a.对于工程问题,一般描述为:从一些测量值(观测量)x 中估计参数 p?即x = f(p), ...
- MySQL“Another MySQL daemon already running with the same unix socket”的处理
方法一: rm var/lib/mysql/mysql.sock service mysqld start 方法二: mv /var/lib/mysql/mysql.sock /var/lib/mys ...