前端工作小结3-token问题

1.使用请求拦截器，拦截vue所有请求，增加token参数

      使用倒数计时，假如token有效期60分钟，会在59分钟的时候去重新拿着refresh_Token，去请求新的token.

     注意：如果一个账号允许多人登录使用，上述方法没有问题，但是如果一个账号只允许一人登录，一个地点登录，那上述方法就不那么全面，这时候可以采用使用响应拦截器，拦截状态码进行对应的异常处理，然后判断哪些是token失效，再进行对应的登出操作或者是重新获取token。

2.完整代码

1. import axios from 'axios'

2. import { getToken } from '@/utils/auth'

3. import { getToken_refresh } from '@/api/users'

4. import router from '../router/index';

6. // 创建axios实例

7. const service = axios.create({

8. baseURL: 'http://122.152.250.75:10101', // api的base_url

9. // baseURL: 'http://127.0.0.1:8081/auth',

10. timeout: 10000 // 请求超时时间

11. })

13. /*是否有请求正在刷新token*/

14. window.isRefreshing = false

15. /*被挂起的请求数组*/

16. let refreshSubscribers = []

18. /*获取刷新token请求的token*/

19. function getRefreshToken () {

20. return localStorage.getItem("refresh_token")

21. }

23. /*push所有请求到数组中*/

24. function subscribeTokenRefresh (cb) {

25. refreshSubscribers.push(cb)

26. }

28. /*刷新请求（refreshSubscribers数组中的请求得到新的token之后会自执行，用新的token去请求数据）*/

29. function onRrefreshed (token) {

30. refreshSubscribers.map(cb => cb(token))

31. }

33. // request 请求拦截器

34. service.interceptors.request.use(config => {

35. if (getToken()) {

36. config.params['access_token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

37. /*判断token是否将要过期*/

38. var istoken = isTokenExpired();

39. if (istoken) {

40. /*判断是否正在刷新*/

41. if (!window.isRefreshing) {

42. /*将刷新token的标志置为true*/

43. window.isRefreshing = true

44. /*发起刷新token的请求*/

45. var params = {

46. refresh_token: localStorage.getItem('refresh_Token'),

47. };

48. getToken_refresh(params).then((res) => {

49. /*将标志置为false*/

50. window.isRefreshing = false

51. /*成功刷新token*/

52. // config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token

53. /*更新auth*/

54. if(res.data.code == 0){

55. alert("登录超时，请重新登录");

56. router.push({ path: '/login' })

57. return

58. }

59. localStorage.setItem('Token',res.data.data.access_token);

60. localStorage.setItem('refresh_Token',res.data.data.refresh_token);

61. localStorage.setItem("expired_at",res.data.data.expired_at);

62. config.params['access_token'] = getToken()

63. /*执行数组里的函数,重新发起被挂起的请求*/

64. onRrefreshed(res.data.data.access_token)

65. /*执行onRefreshed函数后清空数组中保存的请求*/

66. refreshSubscribers = []

67. }).catch(err => {

68. alert(err.response.data.message)

69. /*清除本地保存的auth*/

70. // localStorage.removeItem('auth')

71. window.location.href = '#/login'

72. })

73. }

74. /*把请求(token)=>{....}都push到一个数组中*/

75. let retry = new Promise((resolve, reject) => {

76. /*(token) => {...}这个函数就是回调函数*/

77. subscribeTokenRefresh((token) => {

78. // config.headers.Authorization = 'Bearer ' + token

79. config.params['access_token'] = token

80. /*将请求挂起*/

81. resolve(config)

82. })

83. })

84. return retry

85. }

86. }else{

87. router.push({ path: '/login' })

88. }

89. return config

90. }, error => {

91. // Do something with request error

92. console.log("11111"+error) // for debug

93. Promise.reject(error)

94. })

96. // response 响应拦截器

97. service.interceptors.response.use(

98. response => {

99. // console.log(response)

100. if (response.status !== 200) {

101. if(response.status === 500) { // 服务器断开

102. this.$message({

103. showClose: true,

104. message: '服务器断开，请稍后重试。',

105. type: 'error'

106. });

107. }

108. return Promise.reject(new Error(response.message || 'Error'))

109. } else {

110. return response

111. }

112. },error => {

113. // console.log("cesc"+error)

114. if (error.response.status === 401) { // token失效 ,重新获取token

115. var params = {

116. refresh_token: localStorage.getItem('refresh_Token'),

117. };

118. getToken_refresh(params).then((res) => {

119. /*更新auth*/

120. if(res.data.code == 0){

121. alert("登录超时，请重新登录");

122. router.push({ path: '/login' })

123. return

124. }

125. localStorage.setItem('Token',res.data.data.access_token);

126. localStorage.setItem('refresh_Token',res.data.data.refresh_token);

127. localStorage.setItem("expired_at",res.data.data.expired_at);

128. }).catch(err => {

129. alert(err.response.data.message)

130. /*清除本地保存的auth*/

131. // localStorage.removeItem('auth')

132. window.location.href = '#/login'

133. })

134. }else if(error.response.status === 500) { // 服务器断开

135. alert("服务器断开，请稍后重试。");

136. }else if(error.response.status === 403){ //无auth授权，后台不允许访问

137. alert("不允许访问,请与技术人员联系");

138. }

139. return response

140. return Promise.reject(error)

141. }

142. )

143. /*判断token是否过期*/

144. function isTokenExpired() {

145. let expiredTime = new Date().getTime() / 1000;

146. /*从localStorage中取出token过期时间*/

147. if(localStorage.getItem("expired_at") != undefined && localStorage.getItem("expired_at") != "undefined"){

148. expiredTime = new Date(localStorage.getItem("expired_at")).getTime() / 1000

149. }

150. /*获取本地时间*/

151. let nowTime = new Date().getTime() / 1000

153. /*如果 < 10分钟，则说明即将过期*/

154. var flag = (expiredTime - nowTime) < 10*60;

155. // return (expiredTime - nowTime) < 10*60;

156. return flag;

157. }

158. export default service