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 相关文章推荐
JS 操作符整理[推荐收藏]
Nov 15 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
详解javascript事件冒泡
Jan 09 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 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
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
JS一个简单的注册页面实例
2017/09/05 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
详解Python中with语句的用法
2015/04/15 Python
python实现基本进制转换的方法
2015/07/11 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
职业生涯规划书的格式
2013/12/29 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
房产授权委托书范本
2014/09/22 职场文书
拾金不昧表扬信
2015/01/16 职场文书
表扬信格式模板
2015/05/05 职场文书
导游词之南京栖霞山
2019/10/18 职场文书