vue 实现axios拦截、页面跳转和token 验证


Posted in Javascript onJuly 17, 2018

第一步: 路由 多添加一个自定义字段 requireAuth

path: '/repository',
    name: 'repository',
    meta: {
      requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
    },
    component: Repository

第二步:

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (store.state.token) { // 通过vuex state获取当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }

登录拦截到这里就结束了吗?并没有。

这种方式只是简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。(可手动在浏览器地址栏输入没有权限的路由)

还有一种情况便是:当前token失效了,但是token依然保存在本地。

这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。

这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

第三步:  拦截器 (要想统一处理所有http请求和响应,就得用上 axios 的拦截器。)

每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截

每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token,

当后端接口返回 401 Unauthorized(未授权) ,让用户重新登录。

关于Autorization     使用之后会忽略cookie的token,  削弱了安全性, 可以配合https

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (store.state.token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
      config.headers.Authorization = `token ${store.state.token}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// http response 拦截器

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401: 401 旌旗 灵医 , 只用[授权] 旌旗的医生 才是 灵医

          // 返回 401 清除token信息并跳转到登录页面
          store.commit(types.LOGOUT);
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}
          })
      }
    }
    return Promise.reject(error.response.data)  // 返回接口返回的错误信息
  });

完整的方法见 /src/http.js .

通过上面这几步,就可以在前端实现登录拦截了。

登出 功能也就很简单,只需要把当前token清除,再跳转到首页即可。

 github

后台直接跳转方法:

这种方法只要没有登录 或者登录超时, 

访问任何页面都会跳转到登录页面, 

把不需要验证的页面也给拦截了

在index.html 加载一个 config.jsp

//加载
document.write("<script src='"+(T.cookie.get("path") || "/abc")+"/html5/config.do?sid=" + sid + "'></", "script>");

config.jsp

<c:when test="${isLogin}">
/*
配置文件
*/
var FileConfig = { ... }

</c:when>
<c:otherwise>
  window.location.href = '/html5/login.do';
</c:otherwise>

一个axios靠谱的封装

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

Javascript 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
vue生成token并保存到本地存储中
Jul 17 #Javascript
You might like
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP 类与构造函数解析
2017/02/06 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Python实现各种排序算法的代码示例总结
2015/12/11 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Python BS4库的安装与使用详解
2018/08/08 Python
python的pip安装以及使用教程
2018/09/18 Python
python实现弹窗祝福效果
2019/04/07 Python
python学习开发mock接口
2019/04/28 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
房展策划方案
2014/06/07 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS