vue开发：vue+axios实现登录拦截

最新推荐文章于 2024-08-04 21:45:12 发布

Generon

最新推荐文章于 2024-08-04 21:45:12 发布

阅读量1.1w

点赞数

分类专栏： vue开发

本文链接：https://blog.csdn.net/Generon/article/details/72848158

版权

本文介绍了一个利用Vue、vue-router、vuex和axios实现登录拦截的项目。通过路由拦截和axios拦截器，确保只有登录用户才能访问特定路由，并在token失效时强制重新登录。项目详细介绍了配置路由、使用axios拦截器处理请求和响应的过程。

摘要由CSDN通过智能技术生成

一个项目学会前端实现登录拦截

一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。

前言

该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的
登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。
准备
你需要先生成自己的 Github Personal Token（生成Token）。
Token 生成后访问 Demo，即可查看你的Repository List。

项目结构

.
├── README.md
├── dist  // 打包构建后的文件夹
│   ├── build.js
│   └── build.js.map
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── css.css
│   │   ├── icon.css
│   │   └── logo.png
│   ├── constant
│   │   └── api.js  // 配置api接口文件
│   ├── http.js // 封装fetch、post请求及http 拦截器配置文件
│   ├── index.vue
│   ├── login.vue
│   ├── main.js
│   ├── repository.vue
│   ├── router.js // 路由配置文件
│   └── store
│       ├── store.js  
│       └── types.js  // vuex types
└── webpack.config.js