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 分页全选或反选标识实现代码
Aug 09 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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 strtok()函数的优点分析
2010/03/02 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
javascript实现二叉树遍历的代码
2017/06/08 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
讲解Python中if语句的嵌套用法
2015/05/14 Python
python交互式图形编程实例(一)
2017/11/17 Python
django反向解析和正向解析的方式
2018/06/05 Python
python删除字符串中指定字符的方法
2018/08/13 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Python远程方法调用实现过程解析
2020/07/28 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
经典演讲稿范文
2013/12/30 职场文书
高中美术教学反思
2014/01/19 职场文书
店长职务说明书
2014/02/04 职场文书
医院工作检讨书范文
2014/02/10 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技