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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
php session 写入数据库
2016/02/13 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
跟老齐学Python之Python文档
2014/10/10 Python
python遍历目录的方法小结
2016/04/28 Python
Python 基础教程之包和类的用法
2017/02/23 Python
详解用python实现简单的遗传算法
2018/01/02 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
python返回数组的索引实例
2019/11/28 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python speech模块的使用方法
2020/09/09 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
四好少年事迹材料
2014/01/12 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
给校长的建议书200字
2014/05/16 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers