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 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
vue.js中created方法作用
Mar 30 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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函数)
2006/10/09 PHP
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
jQuery的一些注意
2006/12/06 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
js实现秒表计时器
2019/12/16 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Python字符转换
2008/09/06 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
浅谈Python 函数式编程
2020/06/20 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
环保宣传标语
2014/06/12 职场文书
医学求职自荐信
2014/06/21 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
亲戚关系证明
2015/06/24 职场文书
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA