token鉴权前端操作

前言：

就一天天听说后台用的OAuth 2.0进行token鉴权，那前端需要怎么做呢？
前端需要确认的是，后台使用的哪种类型的token。
参考文档：https://blog.youkuaiyun.com/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