内容简介:之前写了一个node的jwt认证,为了能和node对应,跑通整个流程,前端将设置登录拦截,分别为路由拦截,http拦截。更多文件请看和node server 对应:
前言:
之前写了一个node的jwt认证,为了能和node对应,跑通整个流程,前端将设置登录拦截,分别为路由拦截,http拦截。更多文件请看 github地址
和node server 对应: 前端架构之node jwt认证
大致流程: 在进行路由跳转时,利用 vue-router
提供的钩子函数 beforeEach()
对路由进行判断,符合条件next(),不符合便跳转到登录页面。在发送请求时,统一处理所有http请求和响应,用上 axios 的拦截器,通过配置 http resquest interceptors
为http头增加Authorization字段,其内容为Token,通过配置 http response interceptors
对返回的数据处理。
目录结构:
使用vue-cli构建项目, vue init webpack name
主要说一下src文件吧,assets放置静态文件,components放置一些公共组件,pages放置一些主要页面,router配置路由文件
在config>index.js配置proxyTable
proxyTable: { '/api': { // '/api':匹配项 target: 'http://127.0.0.1:3000/',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://127.0.0.1:3000/user/add',直接写‘/api/user/add’即可 } } },复制代码
路由拦截
在router>index.js中配置beforeEach
//路由跳转之前 router.beforeEach((to, from, next) => { if (to.path !== '/login' && !localStorage.token) { return next('/login') } next() })复制代码
每个钩子方法接收三个参数:
* to: Route: 即将要进入的目标 路由对象
* from: Route: 当前导航正要离开的路由
* next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
* next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
* next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
* next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
确保要调用 next 方法,否则钩子就不会被 resolved。
这种方式只是简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。还有一种情况便是:当前token失效了,但是token依然保存在本地。这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。
这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。
拦截器
新建一个http.js来配置axios拦截器,统一处理所有http请求和响应,就得用上 axios 的拦截器。通过配置 http resquest interceptors
为http头增加Authorization字段,其内容为Token,通过配置 http response interceptors
,当后端接口返回 401 Unauthorized(未授权)
,让用户重新登录。
assets>js>http.js
import axios from 'axios' const http = axios.create() // http request 拦截器 // 每次请求都为http头增加Authorization字段,其内容为Token http.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers.common['Authorization'] = token; } return config; }, error => { return Promise.reject(error); } ); // http response 拦截器 http.interceptors.response.use(response => { let data = response.data if (data.code === 200) { return data.data } if (data.code === 401) { window.location.href = '/login' } return Promise.reject(data) }, error => { return Promise.reject(error) }) export default http复制代码
至此,就实现了拦截,只需要在登录那边设置Token并存进localStorage里便好。
login.vue
login(){ console.log(1111) this.$http.post('/api/login').then(res => { localStorage.setItem('token', res) location.replace('/index') }) }复制代码
这样便可以实现登录认证,可以和之前的node后台那边对应,到时候将会慢慢继续完善...
待续...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- react离开页面,自定义弹框拦截,路由拦截
- Springboot整合Hibernate拦截器时无法向拦截器注入Bean
- 基于原生fetch封装一个带有拦截器功能的fetch,类似axios的拦截器
- SpringMVC拦截器
- IOS 拦截器
- angular 拦截器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法艺术与信息学竞赛
刘汝佳 / 清华大学出版社 / 2004-1 / 45.00元
《算法艺术与信息学竞赛》较为系统和全面地介绍了算法学最基本的知识。这些知识和技巧既是高等院校“算法与数据结构”课程的主要内容,也是国际青少年信息学奥林匹克(IOI)竞赛和ACM/ICPC国际大学生程序设计竞赛中所需要的。书中分析了相当数量的问题。 本书共3章。第1章介绍算法与数据结构;第2章介绍数学知识和方法;第3章介绍计算机几何。全书内容丰富,分析透彻,启发性强,既适合读者自学,也适合于课......一起来看看 《算法艺术与信息学竞赛》 这本书的介绍吧!