前言:
就一天天听说后台用的OAuth 2.0进行token鉴权,那前端需要怎么做呢?
前端需要确认的是,后台使用的哪种类型的token。
参考文档:https://blog.csdn.net/weixin_39973810/article/details/84673548
思考:
我记得以前用的是basic、digest鉴权,现在用上了Bearer token。
其实不管是哪种类型,前端需要做的只是拿到这个token,存起来,然后使用规定的传递方式在每次请求的时候带上它传到后台即可。
操作:
1、登录后获取token存至localStorage
window.localStorage.setItem(‘MYTOKEN’, res.***.access_token)
2、请求拦截添加token,将Bearer token放在头部Authorization中。
import axios from 'axios'
axios.interceptors.request.use(config => {
// 添加 token
if (window.localStorage.getItem('MYTOKEN')) {
config.headers.Authorization = 'Bearer ' + window.localStorage.getItem('MYTOKEN')
}
return config
}, error => {
return Promise.reject(error)
})
3、其他形式请求调用时传递token方式,将Bearer token直接拼在url上。
比如window.open(url)时,是不通过axios调用接口的。
let url = url + '?access_token=' + window.localStorage.getItem('MYTOKEN')
window.open(url)
附录:
简介OAuth 2.0参考文档:
http://www.ruanyifeng.com/blog/2019/04/oauth_design.html