1. 问题
请求第三方接口时，需要先获取后台返回的 访问令牌（Token） 来识别请求。
现在后台给出一个接口可以直接调用来获取 Token，但是调用其他 API 需要 Token 作为参数。
2. 思路
1. 将 Token 通过 sessionStorage.setItem('param', res.data) 存储起来
2. 通过 sessionStorage.setItem('param') 获取该数据
3. 代码
1. <template>
2. <div>
3. <el-table
4. :loading="listLoading"
5. :data="list"
6. hightlight-current-row
7. :stripe="true"
8. >
9. ...
10. </el-tabel>
11. </div
12. </template>
13.
14. <script>
15. import { getToken, getList } from ../api;
16. export default{
17. data () {
18. return {
19. token: null,
20. list: [],
21. listLoading: false // 加载动画默认关闭
22. }
23. } ,
24. methods: {
25. GetToken() {
26. let that = this;
27. getToken().then( res => {
28. if (res.data.code === '200') {
29. sessionStorage.setItem('token', res.data.info); // 存储token
30. } else {
31. that.Error('获取 token 失败');
32. }
33. }).catch(err => {
34. that.Error('');
35. })
36. },
37. GetList() {
38. let that = this;
39. that.listLoading = true;
40. let msg = { token: sessionStorage.getItem('token')}; //调用存储的 token
41. getList(msg).then( res => { if (res.data.code === '200') {
42. that.list = res.data.list;
43. that.listLoading = false; // 加载完成后，关闭加载动画
44. } else {
45. that.Error('获取数据失败');
46. }
47. }).catch(err => {
48. that.Error('');
49. })
50. }
51. },
52. mounted: {
53. // 在页面渲染完成后执行以下函数
54. this.GetToken();
55. this.GetList();
56. }
57. }
58. </script>
4. bug
*** 会先报错，显示获取数据失败，刷新后可获取数据，
分析：由于 GetToken() 函数缓存 token， GetList() 函数无法立即获取
解决：在登录 login 时就获取 token，并缓存，后续就可以直接从缓存中调用 token
