VUE全局导航守卫、 请求、响应拦截器 的设置
文件设置参考地址:https://gitee.com/wang_yu5201314/headlines__news/tree/master/%E9%A1%B9%E7%9B%AE%E6%BA%90%E7%A0%81%E6%96%87%E4%BB%B6/src
文件夹 Router 文件夹 index.js 中设置 全局导航守卫
文件 mian.js 中设置 请求、响应拦截器
设置 请求、响应拦截器
// ************************* axios **************************************
import axios from 'axios'axios.defaults.baseURL = 'http://localhost:3000'
Vue.prototype.$axios = axios
// 请求拦截器
axios.interceptors.request.use(config => {// 拦截请求 , 给每个需要token请求的地方添加tokenlet token = localStorage.getItem('token')if (token) {config.headers.Authorization = token}return config
})
// 响应拦截器
axios.interceptors.response.use(res => {// console.log('响应被截胡了', res)const { message, statusCode } = res.dataif (message === '用户信息验证失败' && statusCode === 401) {// 1. 提示Toast.fail('token失效')// 2. 删除本地token 和 user_idlocalStorage.removeItem('token')localStorage.removeItem('user_id')// 3. 跳转 login// router.push('/login')router.push({name: 'login',params: {back: true,},})}return res
})
VUE全局导航守卫
// 全局导航守卫
// 说明 : 只要路由改变了就会走导航守卫 ( /login => /user )
// to : 将要访问哪里 ($route路由对象 to.path) ★
// from : 从哪里来 ($route路由对象 from.path)
// next : 是否放行
// next() => 直接放行 ★
// next(false) => 不放行
// next('/login') => 像重定向 => 放行 => 去 /login ★
router.beforeEach((to, from, next) => {// console.log('to', to.path)let token = localStorage.getItem('token')// 把需要拦截未登录访问的权限页面 全部都加到数组里面let autlUrlArr = ['/user', '/myfollow', '/mycomments', '/mystar']// 如果访问的是 /user => 继续判断// if(to.path === '/user' || to.path)// if (autlUrlArr.indexOf(to.path) > -1) {if (autlUrlArr.includes(to.path)) {// 如果登录了 可以访问if (token) {next()} else {// 如果没有登录 跳转到登录页面next('/login')}} else {// 如果访问的是 /login /register => 永远可以next()}
})
VUE全局导航守卫、 请求、响应拦截器 的设置相关推荐
- Axios的Vue插件(添加全局请求/响应拦截器)
/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */ // https://github.com/mzabriskie/axios import axios from ...
- Vue中使用axios的响应拦截器处理请求失败的情况(处理token过期问题)以及 登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
- axios 请求拦截器响应拦截器
一. 拦截器介绍 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器 在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
- axios请求拦截器、响应拦截器、vue-router路由导航守卫的使用(案例)
axios官方文档 一.请求拦截器 设置headers,给所有请求加上Authorization:token值 二.响应拦截器 直接去访问/article,发现可以进入到article内容管理页面 原 ...
- Vue中的请求拦截器和响应拦截器
前置 大家好,我又来了,我们今天就讲一下什么是请求拦截器,和请求拦截器的作用,好了,多余的话我就不说了,马上开始今天的讲解 开始啦 请求拦截器 请求拦截器的作用是: 在请求发送前进行一些操作,例如在每 ...
- vue中的请求拦截器与响应拦截器的使用
之前讲到在项目中封装了axios,vue中对axios封装 就有了request.js这个文件,那么在这个文件中就可以写请求拦截器与响应拦截器. 请求拦截器: 请求拦截器的作用是在请求发送前进行一些操 ...
- vue请求拦截器 响应拦截器
import axios from "axios"; // 创建一个axios的appconst request = axios.create({baseURL:'http://1 ...
- vue 响应拦截器不起作用
跟着up主做的,他的拦截器没问题但是我的就是不起作用. 后来在mian.js中添加了下面两行,全局引入,然后就可以了. import axios from 'axios' Vue.prototype. ...
- axios 最全 请求拦截器 响应拦截器 配置公共请求头 超时时间 以及get delete post put 四种请求传参方式
axios 拦截器 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作 例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易 响应拦截器 响应拦截器的作用是在接收到响应后进行一些操 ...
最新文章
- 基于RNN的语言模型与机器翻译NMT
- Android_注解+反射代替findViewById()
- 刮奖的实现;(刮开上层图层蒙版,露出底部的视图)
- mvc 404错误 php,java - springmvc 请求无法到达controller,出现404错误
- data为long 怎么设置vue_vue基础之data
- 网络电话---异常处理01
- 【Linux】Ubuntu安装命令
- 解决Linux中文乱码问题
- python字典添加元素使用技巧大全_字典里添加元素有哪些方法
- Spring Quartz配置
- 仪表盘故障图像识别_一张图教你识别汽车故障灯!
- Cadence学习之路(八)画PCB前你必须知道的事情!
- 宇视摄像机如何修改设备IP地址
- 第八问:hub 集线器是啥,作用
- 从0开始,手把手搭建个人网站
- 杜甫ndows 10怎么安排五笔,燕字五笔怎么打|燕子|杜甫|出处_诗词_综合试卷网_中国教育考试门户网站...
- TencentOS-Tiny在苹果MacOS初上手
- 批量抠图,只需要这几行python代码!
- switch按钮文字切换
- html 自动 生成 日期,自己生成Select列表日期时间
热门文章
- STM32开发板入门教程(十三) - SPI模式读写SD卡
- 人工智能对金融世界的改变_人工智能革命正在改变网络世界
- 5行代码可实现5倍Scikit-Learn参数调整的更快速度
- 1000万贷款三年,到期一次性偿还1500万,这个利息算不算高?
- 我国身家超过亿元的有多少人?
- 风洞试验计算机控制模块,计算机控制风洞
- 未备案域名临时跳过备案提示_做好了网页,有域名和服务器,还要怎么搭建网站?...
- java中compare语句的用法_Java RuleBasedCollator compare()用法及代码示例
- python中re_Python中re(正则表达式)模块学习
- matlab 最小二乘法拟合_计量与论文串讲:最小二乘法