vue 权限认证token的实现方法


Posted in Javascript onJuly 17, 2018

最近搞一个vue的项目,接口带了权限验证,于是乎稍微研究了一下,中间遇到的各种坑都来源于自己概念的不熟悉。

主要呢是分两步:

一是vue路由层的控制,由于项目的路由有规律可循,所以没有采用网上requireAuth那种在需要加验证的路由上配置meta(具体见:https://3water.com/article/143928.htm)

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({...})

router.beforeEach((to, from, next) => {
 if(/^\/[S|B|V]/.test(to.path)){
  if (isLogin()) {//判断token信息的自写方法
   next();
  }
  else {
   next({ name: 'login' })//跳转到登录页
  }
 }
 else {
  next();
 }
})

二是http 拦截器 ,统一处理所有http请求和响应,就得用上 axios 的拦截器。

import axios from 'axios'
// http request 拦截器
axios.interceptors.request.use(function (config) {
  config.headers.token = sessionStorage.getItem("user_token")//将接口返回的token信息配置到接口请求中
  return config;
}, function (error) {
  return Promise.reject(error);
});
// http response 拦截器
axios.interceptors.response.use(function(response){
  if(response.data.code=='1001'||response.data.code=='1002'){//具体的判断token失效的参数
    sessionStorage.setItem("user_token",'')
    sessionStorage.setItem("LoginUser",'{}')
    alert(response.data.msg);
    window.location.href='/#/login'//需求方要求一旦出错立即跳转登录,所以采取这种侵入式的手段。
  }else{
    return response
  }
}, function (error) {
  return Promise.reject(error);
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 #Javascript
详解webpack import()动态加载模块踩坑
Jul 17 #Javascript
vue-router中的hash和history两种模式的区别
Jul 17 #Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 #Javascript
SVG实现时钟效果
Jul 17 #Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 #Javascript
基于D3.js实现时钟效果
Jul 17 #Javascript
You might like
Sublime里直接运行PHP配置方法
2014/11/28 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP进程通信基础之信号
2017/02/19 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python 实现插入排序算法
2012/06/05 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
房屋改造计划书
2014/01/10 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
Golang 字符串的常见操作
2022/04/19 Golang