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

 更新时间:2018年07月17日 14:15:14   作者:you1you  
这篇文章主要介绍了vue 实现axios拦截、页面跳转和token 验证,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

第一步: 路由 多添加一个自定义字段 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靠谱的封装

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

相关文章

  • vue3集成echarts数据刷新后图表不刷新的解决方法

    vue3集成echarts数据刷新后图表不刷新的解决方法

    vue3 集成 echarts 最大的坑就是出现了,reactive 的数据 刷新了,但图表缺不会刷新,所以本文就给大家详细的介绍一下vue3集成echarts数据刷新后图表不刷新的解决方法,需要的朋友可以参考下
    2023-08-08
  • Vue两个同级组件传值实现

    Vue两个同级组件传值实现

    Vue组件之间是有联系的,避免不了组件之间要互相传值,那么如何实现Vue两个同级组件传值,本文就来介绍一下,感兴趣的可以了解一下
    2021-07-07
  • vue左侧菜单,树形图递归实现代码

    vue左侧菜单,树形图递归实现代码

    这篇文章主要介绍了vue左侧菜单,树形图递归实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • vue-loader教程介绍

    vue-loader教程介绍

    本篇文章主要介绍了vue-loader教程介绍,vue-loader就是告诉webpack如何将vue格式的文件转换成js。有兴趣的可以了解一下
    2017-06-06
  • 在vue-cli中组件通信的方法

    在vue-cli中组件通信的方法

    本篇文章主要介绍了在vue-cli中组件通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue中使用echarts的方法实例详解

    vue中使用echarts的方法实例详解

    这篇文章主要介绍了vue中使用echarts的方法,结合实例形式详细分析了vue中使用echarts的包安装、引入、生命周期函数元素挂载等相关操作技巧与使用注意事项,需要的朋友可以参考下
    2023-05-05
  • el-popover如何通过js手动控制弹出框显示、隐藏

    el-popover如何通过js手动控制弹出框显示、隐藏

    最近项目中多次用到了Popover弹出框,下面这篇文章主要给大家介绍了关于el-popover如何通过js手动控制弹出框显示、隐藏的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue3 + element-plus 的 upload + axios + django 实现文件上传并保存功能

    vue3 + element-plus 的 upload + axios + django 实现文件上

    这篇文章主要介绍了vue3 + element-plus 的 upload + axios + django 文件上传并保存,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue实现学生录入系统之添加删除功能

    vue实现学生录入系统之添加删除功能

    本文给大家带来一个小案例基于vue实现学生录入系统功能,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • Vue移动端下拉刷新组件的使用教程

    Vue移动端下拉刷新组件的使用教程

    这篇文章主要介绍了Vue移动端下拉刷新组件的使用教程,每一次我在使用vant组件库里面list组件和下拉刷新连在一起用的时候都会出现下拉刷新和列表下滑局部滚动的冲突,这就很难受,这篇文章将解决它
    2023-04-04

最新评论