Vue 前端实现登陆拦截及前端实现登陆拦截及axios 拦截器的使用拦截器的使用
主要介绍了Vue 前端实现登陆拦截及axios 拦截器的使用,通过这个项目学习如何实现一个前端项目中所需要的
登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。需要的朋友可以参考下
该项目是利用了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
技术栈技术栈
Vue 2.0
vue-router
vuex
axios
vue-material
登录拦截逻辑登录拦截逻辑
第一步：路由拦截
首先在定义路由的时候就需要多添加一个自定义字段 requireAuth ，用于判断该路由的访问是否需要登录。如果用户已经登录，
则顺利进入路由， 否则就进入登录页面。
const routes = [
{
path: '/',
name: '/',
component: Index
},
{
path: '/repository',
name: 'repository',
meta: {
requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
},
component: Repository
},
{
path: '/login',
name: 'login',
component: Login
}
];
定义完路由后，我们主要是利用 vue-router 提供的钩子函数 beforeEach() 对路由进行判断。
评论0