vue 权限认证token的实现方法

 更新时间:2018年07月17日 14:17:54   作者:明媚jm静好  
这篇文章主要介绍了vue 权限认证token的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

主要呢是分两步:

一是vue路由层的控制,由于项目的路由有规律可循,所以没有采用网上requireAuth那种在需要加验证的路由上配置meta(具体见:https://www.jb51.net/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);
});

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

相关文章

  • Vue+Typescript中在Vue上挂载axios使用时报错问题

    Vue+Typescript中在Vue上挂载axios使用时报错问题

    这篇文章主要介绍了Vue+Typescript中在Vue上挂载axios使用时报错问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-08-08
  • Vue项目中数据的深度监听或对象属性的监听实例

    Vue项目中数据的深度监听或对象属性的监听实例

    这篇文章主要介绍了Vue项目中数据的深度监听或对象属性的监听实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue实现指令式动态追加小球动画组件的步骤

    Vue实现指令式动态追加小球动画组件的步骤

    这篇文章主要介绍了Vue实现指令式动态追加小球动画组件的步骤,帮助大家更好的理解和实用vue,感兴趣的朋友可以了解下
    2020-12-12
  • Vue中$bus的用法及$on、$off的使用说明

    Vue中$bus的用法及$on、$off的使用说明

    这篇文章主要介绍了Vue中$bus的用法及$on、$off的使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 基于Vue实现图片在指定区域内移动的思路详解

    基于Vue实现图片在指定区域内移动的思路详解

    这篇文章主要介绍了基于Vue实现图片在指定区域内移动,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue2 的12种组件通讯

    Vue2 的12种组件通讯

    之前文章我们描述给过Vue3 的七通信使用,今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • Vue+Django项目部署详解

    Vue+Django项目部署详解

    这篇文章主要介绍了Vue+Django项目部署详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue路由传参三种基本方式详解

    vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • Vue 页面监听用户预览时间功能的实现代码

    Vue 页面监听用户预览时间功能的实现代码

    这篇文章主要介绍了Vue 页面如何监听用户预览时间,首先需要借助vue页面的生命周期函数mounted和destroyed,分别加入开始计时和清除计时的逻辑,通过相关操作实现此功能,需要的朋友可以参考下
    2021-07-07
  • Vue3.0监听器watch与watchEffect详解

    Vue3.0监听器watch与watchEffect详解

    在 Vue 3 中,watch 仍然是一种用于监听数据变化并执行相应操作的方式,不过在组合式 API 中,watch 的使用方式与选项式 API 略有不同,这篇文章主要介绍了Vue3.0监听器watch与watchEffect,需要的朋友可以参考下
    2023-12-12

最新评论