uniapp无感登录

前言

无感登录，我认为这在小程序开发中很常见，也很有必要。说实话，想要一个无感登录。我就必须把请求逻辑，请求语法捋一遍，学一下。当然，这也不是很难。我原先的思路是要每一次请求前都需要自己检查一下登陆信息（如token），若无则先登录再执行请求。

使用vuex

没错，虽然说用storage可能更快更方便，但是谁不想把配置拉满呢。当然，一味的堆配置也不行。配置的初衷就是提高开发效率，整多了效率可能还更低，打包后无用体积可能过大。

第一次接触vuex，并仔细摸索了一下他在vue3中的用法。这不，我还专门写了篇笔记。整理了mutation和action的区别。事实上，我还是被mutation绊了好久。

封装request

要想完成之前的思路，整一个封装最优雅不过了。我甚至还专门对api进行更好的封装，匹配其使用。但是在最后，这些可有可无的东西都付之东流了。封装一个request也很麻烦，因为我太想要优雅了。。。所以花了很久。

遭遇BUG

我已经把代码基本写好了，就差测试了。但是测试时才发现他有个报错：找不到state。我很苦恼。当时我没加token这个state没这个问题，加了之后出问题。所以我直接怀疑是这里的问题，代码反复修改，修改到最后及其不优雅，我都不想写了。。过了很久，我才意识到，原来是我封装的request.js想要引用vuex的方法和在.vue里面引用的方式不一样。我花了两天才解决这个问题。

梅开二度

代码全都写完，上手测试一下的时候，发现一个大问题。。

就是我拦不住请求，没在请求之前加上token。之所这样，是因为我用了mutation存login（）函数。这是一个异步的。。当然，在这写没毛病，只是uni.request的使用方式不对（这是我最后才了解的。要用promise的方式搭配async/await）异步让我拦不住请求。我很崩溃，这么多代码白写了的感觉。因为，对异步很无解，所以我以为这样写在mutation无解。我就专门找了个封装模块ajax，用里面的拦截器。所以我把代码又双重写了一遍。但很不幸，我依旧这个问题。就如下图所示：

<br/>

这个login（）还是异步。没办法，我向大佬求助，终于得解。

在config，function前面都加上async。在uni.request前加上await。事实上，因为之前的写法，我把回调属性sucess，fail之类的写在request里面，没有用promise写法，导致加了await他也不听话。最后改过来，再修补逻辑问题，终于得解。这总共就耗费我5、6天。。。。。

作者： Marlene