通过AJAX动态更新数据,替换方式

第一次接触token处理,初来乍到,说错的地方还请各位多多指教。

图片 1

最近在做一个跟美团同样一套预约系统,由于一个商家会有很多主题,而每个主题下面会有很多场次。

token身份验证机制

说说烂大街的if/if…else…,程序中用得最多的流程判断语句。

那怎么在一个页面把这些数据很好的动态展示出来呢?我首先想到了VUE的动态绑定数据。

客户端登录请求成功后,服务器将用户信息(如用户id)使用特殊算法加密后作为验证的标志发送给用户(即token),当用户下次发起请求时,会将这个token捎带过来,服务器再将这个token通过解密后进行验证,通过的话,则向客户端返回请求的数据;反之,则请求失败。

对着曾经满屏的if/if…else…,心想能不能搞点事情,折腾点浪花浪里呀浪。

由于第一次使用VUE,很多东西不懂,只能靠百度。服务器端返回的数据直接是JSON数据,初始数据完美的通过VUE渲染了出来,但是在切换主题显示场次信息的时候,出现了问题。发现数据是获取到了,但是VUE并没有对它进行渲染。

token优点

对顶着“这个需求很简单,怎么实现我不管,明天上线”的程序猿,答案必须YES。

图片 2 

它是无状态的,且服务器不用像传统的身份认证(session)那样需要保存会话信息,减轻了服务器的压力。

“Write Less, Do More”,学习进步的本质就是为了更有效率地偷懒。

var ndata = new Vue({
 el:'#playlist',
 data:{
 rows:{}
 },
 mounted: function() {
 var self = this;
 }
});
后来查了很多资料,通过以上方法,AJAX获取数据动态的成功绑定了数据
$.getJSON("URL, function(json){
//获取初始的数据
  ndata.rows = json;
});

vue的token刷新处理

废话说完,直接上方法汇总,让我们来一窥究竟:

总结

在对token身份验证机制进行一次简单介绍后,进入正文…

switch改写if

以上所述是小编给大家介绍的Vue2.X
通过AJAX动态更新数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

一般为了安全性,token都会设置一个过期时间,在过期之后就无法请求相关接口了,这时应该怎么办呢,是直接退出登录吗?

// if 版本
var a = 1;
if(a > 1 && a < 5) {
 return 1
} else if(a > 5 && a < 10){
 return 5
}else{
 return 10
}

// switch 改版
switch(true){
 case (a > 1 && a < 5):
  return 1
 case (a > 5 && a < 10):
  return 5
 default:
  return 10
}

您可能感兴趣的文章:

  • 浅谈Vue.js应用的四种AJAX请求数据模式
  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定
  • 使用vue框架
    Ajax获取数据列表并用BootStrap显示出来
  • Vue.js展示AJAX数据简单示例讲解
  • 详解vue与后端数据交互(ajax):vue-resource
  • 详解vue 中使用
    AJAX获取数据的方法
  • 详解使用Vue.Js结合Jquery
    Ajax加载数据的两种方式

在目前公司的项目里,为了更好的用户体验,我们选择手动刷新token。登录请求成功后,会返回一个token和token过期时间,在每次请求api时,前端可以先判断一下token是否即将过期或已过期,如果是,则请求刷新token的接口,成功替换原来的token之后才可以重新发起请求。

以上代码的switch…case…的用法实际使用不多,仅供参考。
 一般case为常量时switch…case…用得较多。

下面,我们直接看代码,这是在vue的请求拦截器里进行的相关操作:

选择分支较多时,建议选用switch…case可提高程序的效率,但switch…case不足的地方在于只能处理字符或者数字类型的变量,if…else更加灵活,可用于判断表达式是否成立,比如if(a+b>c),if…else的应用范围更广。

/*是否有请求正在刷新token*/
window.isRefreshing = false
/*被挂起的请求数组*/
let refreshSubscribers = []

/*获取刷新token请求的token*/
function getRefreshToken () {
 return JSON.parse(localStorage.auth).refresh_token
}

/*push所有请求到数组中*/
function subscribeTokenRefresh (cb) {
 refreshSubscribers.push(cb)
}

/*刷新请求(refreshSubscribers数组中的请求得到新的token之后会自执行,用新的token去请求数据)*/
function onRrefreshed (token) {
 refreshSubscribers.map(cb => cb(token))
}

/*请求拦截器*/
ajax.interceptors.request.use(
 config => {
  const authTmp = localStorage.auth
  /*判断是否已登录*/
  if (authTmp) {
   /*解析登录信息*/
   let auth = JSON.parse(authTmp)
   /*判断auth是否存在*/
   if (auth) {
    /*在请求头中添加token类型、token*/
    config.headers.Authorization = auth.token_type + ' ' + auth.token
    /*判断刷新token请求的refresh_token是否过期*/
    if (util.isRefreshTokenExpired()) {
     alert('刷新token过期,请重新登录')
     /*清除本地保存的auth*/
     localStorage.removeItem('auth')
     window.location.href = '#/login'
     return
    }
    /*判断token是否将要过期*/
    if (util.isTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
     /*判断是否正在刷新*/
     if (!window.isRefreshing) {
      /*将刷新token的标志置为true*/
      window.isRefreshing = true
      /*发起刷新token的请求*/
      apiList.refreshToken({refresh_token: getRefreshToken()}).then(res => {
       /*将标志置为false*/
       window.isRefreshing = false
       /*成功刷新token*/
       config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token
       /*更新auth*/
       localStorage.setItem('auth', JSON.stringify(res.data.data))
       /*执行数组里的函数,重新发起被挂起的请求*/
       onRrefreshed(res.data.data.token)
       /*执行onRefreshed函数后清空数组中保存的请求*/
       refreshSubscribers = []
      }).catch(err => {
       alert(err.response.data.message)
       /*清除本地保存的auth*/
       // localStorage.removeItem('auth')
       window.location.href = '#/login'
      })
     }
     /*把请求(token)=>{....}都push到一个数组中*/
     let retry = new Promise((resolve, reject) => {
      /*(token) => {...}这个函数就是回调函数*/
      subscribeTokenRefresh((token) => {
       config.headers.Authorization = 'Bearer ' + token
       /*将请求挂起*/
       resolve(config)
      })
     })
     return retry
    }
   }
   return config

  } else {
   /*未登录直接返回配置信息*/
   return config
  }
 },
 /*错误操作*/
 err => {
  return Promise.reject(err)
 }
)

三元运算符改写if

这里需要注意几点:

// if 版本
if (bool) {
 value = 1;
} else {
 value = 2;
}

// 三元运算符 版本
value = bool ? 1 : 2;
// 三元预算符 多个运算需要括号包裹 此处用了逗号表达式
return typeof foo === 'object'?(console.log(1),1):(console.log(2),2);

1、当token即将过期或者已过期时,原则上,我们只需要有一个接口去触发刷新token的请求即可,这里的isRefreshing
变量,就起到这样一个监控的作用,它相当于一把锁,当刷新token的操作被触发后,其他的触发操作就被排斥在外了。

优点:代码简化,更加清爽,write less

window.isRefreshing = false

缺点:复杂的三元运算符可读性较差,需友好注释

2、刷新token的接口,用到了一个另外的token(refresh_token),这也是出于安全性考虑的,并且它也有过期时间,不过这个过期时间一般都比普通token的过期时间要长,所以在上面代码中,会发现,我在请求拦截中优先判断了refresh_token是否过期,如果过期则直接退出登录,不再进行下一步的操作。

TIPS: 三元运算符后面不能带return
// 错误用法,运算符号后不能带return
bool ? return 1 : return 2;
 /*判断刷新token请求的refresh_token是否过期*/
if (util.isRefreshTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
 alert('刷新token过期,请重新登录')
 /*清除本地保存的auth*/
 localStorage.removeItem('auth')
 window.location.href = '#/login'
 return
}

逻辑判断 and(&&)和or(||) 改写if

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注