Vue——token原理、路由导航守卫与请求拦截器

当页面跳转时,如何才能保存页面的状态呢?
有三种方式能够保存页面状态

  1. 通过cookie在客户端记录状态
  2. 通过session在服务器端记录状态
  3. 通过token方式维持状态

    文章目录

        • 1. token原理分析
        • 2. 案例
        • 3. 路由导航守卫
        • 4. 请求拦截器

    如果前端和后台接口不存在跨域问题推荐使用cookie和session方式记录状态,如果存在跨域那就必须使用token方式记录状态。
    这篇博客只讲解一下token方式,关于cookie与session的原理可以查阅往期node.js的博客。

1. token原理分析

这里我们通过一个实现登录功能的案例来简单了解一下token是如何记录状态的。
通过在客户端登录页面输入用户名和密码把这次请求提交给服务器,服务器根据这次请求验证用户是否存在,如果验证通过,则会生成该用户的token并返回给客户端,客户端收到并存储该token,后续发送的所有请求都必须携带该token,因为token是保证用户登录成功后的唯一令牌,最后服务器端会根据token来控制是否通过权限。
Vue——token原理、路由导航守卫与请求拦截器_第1张图片

2. 案例

案例准备工作:这里我写好了一个未实现存储页面状态功能的登录页面以及登录的API接口,可以成功发送登录的post请求,并且登录的post请求返回的响应结果中包含了token字符串。
Vue——token原理、路由导航守卫与请求拦截器_第2张图片
该项目中除了登录之外的其他API接口都必须在登录之后才能进行访问,因此就必须保存token以进行其他API的访问验证,另外,token只应在当前网站打开期间生效,所以token必须保存在sessionStorage中。
下面我们通过代码来实现保存token至sessionStorage并跳转home页面。
Vue——token原理、路由导航守卫与请求拦截器_第3张图片
点击登录按钮后,能成功跳转home页,并在会话仓库(sessionStorage)中能成功存储token。
关键代码:

window.sessionStorage.setItem("token",res.data.token)
this.$router.push("/home")

3. 路由导航守卫

基于之前的案例,我们把sessionStorage中的token删除,再访问home依旧能成功,这就不合乎“除了登录页面,访问其他页面都必须携带token字符串才能访问”这一规定了,为了解决这一问题,我们使用路由导航守卫,路由导航守卫用于控制访问权限

如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。
路由导航守卫代码如下

// 为路由对象添加beforeEach导航守卫
router.beforeEach((to, from, next) => {
	// 如果用户访问的登录页,直接放行
	if (to.path === '/login') return next()
	// 从sessionStorage中获取保存的token值
	const tokenStr = window.sessionStorage.getItem('token')
	// 没有token,强制跳转到登录页
	if (!tokenStr) return next('/login')
	next()
})

beforeEach就是所谓的导航守卫,它接收一个包含三个参数的回调函数,其中to代表将要访问的页面,from代表从哪个路径跳转而来,next是一个表示放行的函数,如果访问的页面路径是登录页,则直接放行,不是登录页则获从sessionStorage中获取保存的token值,如果没有token则强制跳转到登录页(next(‘/login’)),有token就放行,即验证成功。
注意:路由导航守卫需在router中配置。
Vue——token原理、路由导航守卫与请求拦截器_第4张图片
完成路由导航守卫的配置后,删除token再次访问Home页将自动跳转登录页。

4. 请求拦截器

基于之前的案例,我们实现了登录时存储token以及路由导航守卫保证页面的安全性,接着我们实现如何让其他API接口请求都携带token来发送数据
这时,我们就必须通过axios配置请求拦截器,只要配置了请求拦截器,你在每次使用axios发送Ajax请求前都会调用请求拦截器中的回调函数,我们只需在回调函数中实现“需要授权的API,在请求头中使用Authorization字段提供token令牌”,就能保证请求都携带token。
请求拦截器就相当于一个预处理的过程。
请求拦截器一般都在入口文件(main.js)中配置。

// axios请求拦截
axios.interceptors.request.use(config => {
	// 为请求头对象,添加Token验证的Authorization字段
	config.headers.Authorization = window.sessionStorage.getItem('token')
	return config
})

config就是请求对象,在回调函数的最后必须返回config。
这里我们点击登录按钮打印一下config,查看一下请求对象的属性。
Vue——token原理、路由导航守卫与请求拦截器_第5张图片
可以看到请求对象的属性中有baseURL,data,请求头等数据,但请求头中并没有Authorization的请求头,因此接下来我们为请求对象添加Authorization请求头。
Vue——token原理、路由导航守卫与请求拦截器_第6张图片
可以看到成功添加到了Authorization请求头,但是请求头为null,这是因为发送登录请求前我们的sessionStorage中并没有存入token字符串,登录请求发送完成后,token字符串才存入sessionStorage中。
除了登录请求之外,其他请求在发送前都能将token字符串添加到Authorization请求头中。

你可能感兴趣的:(Vue,网络&请求,vue.js,前端,javascript,网络安全,网络,开发)