实现登录功能之拦截器和导航守卫的使用

最新推荐文章于 2024-03-09 08:00:10 发布

原创最新推荐文章于 2024-03-09 08:00:10 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue+elementUI学习同时被 2 个专栏收录

5 篇文章

订阅专栏

my first demo

5 篇文章

订阅专栏

本文介绍了一个使用SpringSecurity、jwt和vue.js实现的登录Demo，重点讨论了在前端如何应用拦截器处理请求和响应，以及利用vue-router的导航守卫初始化菜单。文中提及的开发环境包括nodejs、vue、npm、webpack等，并提供了关键代码片段。

需求：本次主要通过SpringSecurity+jwt+vue实现简易的登录Demo

实现的功能：主要写Demo过程中记录关于拦截器和导航守卫的使用

环境：

        nodejs v14.16.1
vue 2.9.6
npm 6.14.12
  webpack 3.12.0
  node-sass 4.14.1
  sass-loader 7.1.0

使用的技术：

①拦截器：这里说的拦截器主要分为两种，一种是请求拦截器、一种是响应拦截器，主要的作用是：在请求给后台或者响应给用户之前通过拦截器拦截进行的预处理操作

②导航守卫：官网的解释：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。这里目前只用来进行初始化菜单。

遇到的问题：

无

关键代码：

api.js（主要编写请求拦截器和响应拦截器，这里以响应拦截器为例）

//响应拦截器
axios.interceptors.response.use(success=>{
    if(success&&success.status==200){
      if(success.data.code==500||success.data.code==401||success.data.code==403){
        Message.error({message:success.data.message});
        return;
      }
      if(success.data.message){
        Message.success({message:success.data.message});
      }
    }
    return success;
},error => {
  if(error.response.code==504||error.response.code==404){
    Message.error({message:'服务器异常'});
  }
  else if(error.response.code==403){
    Message.error({message:'权限不足！'});
  }
  else if(error.response.code==401){
    Message.error({message:'尚未登录,请先登录！'});
    router.replace("/login");
  }else{
    if(error.response.message){
      Message.error({message:error.response.message});
    }else{
      Message.error({message:'未知错误！'});
    }
  }
  return error;
})

main.js

...
router.beforeEach((to,from,next)=>{
  //这里还可以通过session判断token是否存在来决定是否要初始化菜单
  initMenu(route,store);
})

...

备注：