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靠谱的封装

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

相关文章

  • VUE微信H5生成二维码海报保存在本地相册的实现

    VUE微信H5生成二维码海报保存在本地相册的实现

    本文主要介绍了VUE微信H5生成二维码海报保存在本地相册的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • vue调试工具没有Pinia模块的简单解决办法

    vue调试工具没有Pinia模块的简单解决办法

    Pinia是Vue的存储库,它允许您跨组件/页面共享状态,这篇文章主要给大家介绍了关于vue调试工具没有Pinia模块的简单解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • 解决vue3+vite配置unplugin-vue-component找不到Vant组件

    解决vue3+vite配置unplugin-vue-component找不到Vant组件

    这篇文章主要为大家介绍了vue3+vite配置unplugin-vue-component找不到Vant组件问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue结合ElementUI上传Base64编码后的图片实例

    Vue结合ElementUI上传Base64编码后的图片实例

    这篇文章主要介绍了Vue结合ElementUI上传Base64编码后的图片实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果的实例代码

    这篇文章主要介绍了Vue 使用计时器实现跑马灯效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • vue-echarts如何实现图表组件封装详解

    vue-echarts如何实现图表组件封装详解

    由于在项目中需要对数据进行可视化处理,也就是用图表展示,所以下面这篇文章主要给大家介绍了关于vue-echarts如何实现图表组件封装的相关资料,需要的朋友可以参考下
    2022-05-05
  • 详细分析vue响应式原理

    详细分析vue响应式原理

    这篇文章主要介绍了vue响应式原理的的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-06-06
  • vant-ui组件库中如何修改NavBar导航栏的样式

    vant-ui组件库中如何修改NavBar导航栏的样式

    这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • webpack如何将vue3单页面应用改造成多页面应用

    webpack如何将vue3单页面应用改造成多页面应用

    这篇文章主要介绍了webpack如何将vue3单页面应用改造成多页面应用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • vue中PC端地址跳转移动端的操作方法

    vue中PC端地址跳转移动端的操作方法

    最近小编接到一个项目pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面,下面小编给大家分享实现过程,一起看看吧
    2021-11-11

最新评论