Vue3.x项目全程实录 26_用户登录开发过程 学习猿地原创

大家好，我是学习园地的特约讲师高沃峰，上节课咱完成了用户的注册，已经成功注册了一个信息了，当然你可以注册多个都是没关系的啊，只是邮箱不能相同。呃，当然了，那注册的时候呢，你也可以去访问那个验证码，加些验证码一些限制啊，那有了注册了服务器已经用户信息了，那下一步呢，想授权的话就得登录，那登录成功了，我们就可以访问，相当于授权了，那我们就可以访问已授权的所有接口啊，那我们才能继续往下做其他的功能，所以呢，这节课呢，咱完成登录的功能。那登录的功能呢，我们从跟这个注册的页面现在是差不多的，咱比如说在这里边加一个。呃，加一个按钮吧，呃，这已经有这个呃按钮啊，我们在这里边再加一个div，提示一个消息，然后呢，我们加一个样式吧，那等于呃登录的一个链接，登录的一个链接在这里边，然后我们点击的时候让它跳转到。在这里边我们先写上这样的消息，比如说已有什么已有账号啊，立即登录，立即登录，加上一个这样的一个提示，这样的话，我们在这块也有账号立即登录，但这个不太好看，对吧，那我们在这个地方。

嗯，把它的样式。加过来，在这块加上点。登录的样式，那这个样式我们可以随意的想，你看什么情况好就可以，对不对，比如说我们来一个自己的尺寸是14个像素看一下，然后让它离顶部远点marin，呃，Marin底部吧，因为它挨着下边的按钮嘛。啊。是一个下边按钮了，对不对，所以呢，字体现在我们变小了，底部我们用的是来一个20个像素。20个像素保存一下，里边有距离了对吧，然后嗯，让他的字体的颜色，咱们随便写个颜色啊，选择一个。这块已有账号立即登录，随便选择一个，然后我们在呃display让它变成行几块，让他靠这边对吧，行几块。

嗯，再来一个文本福利，靠谱。挺倔强，没有过来。文本和另靠我们看一下它这个。品牌。已有账号，立即登录。嗯，这个组。不管我们看一下哪个。里面加一个test test test。直接在样式上可以用吗？默认它怎么一直是居中的，那我们用上lot就是。啊锁可以对吧，放在这边你登录当然放在中间也可以啊。

那同样的这个登录，那登录呢，我们可以在这块直接。找到这个位置。直接加一个呃，可以可吧，点击的时候，那我就不在这块做的方法，直接在这块通过呃路由跳转，跳转到我们登录页面就可以了。呃，你也可以做一个实践的一个方法，那这里边直接点击调用路由，那我们直接用刀符在页面里边直接调用路由器。路由器里边psh跳转到哪呢？跳转到我们的。Pass，指定的一个路径叫什么？Loginin login就可以了。这样的话，我们一点击这个对吧，已有账号点击跳转到噪音就可以了，那我们登录的页面和它是一模一样的，所以我们复制一个这个。做一个登录。中心这块复制一下称为到我们的登录啊，Log Ron log这个组件。对添加，当然我们这添加完了，我们路由里边也得添加一个。就是。

个人中心这块，这是用户的注册，我们再来一个。用户的登录老给你。Ron。名字叫做log Ron，然后。组件给你，正好用户登录，那当然了，上面我们也得需要这个组件。在这块能给复制一个，改成老Ron，老这个位置我们也加上。报名就可以了，现在你看这个组件就过来，这是注册，点击用户登录你看。啊，但是这里边提示呢，还是因为界面是一样的，对吧，所以我们在这里边就改用用户登录。或者你就要登录俩字就可以啊，然后呢，我们这个呃，名称不能相同，Login login。就可以了，然后在这里边把所有的这个提交的这个去掉。去掉，然后我们再改变一下页面，嗯，下边就输入用户密码就行了，确认密码和邮箱我们就不需要了，只需要这两个，然后这块改成，嗯，因为这块是注册的那个地方的，那我们这块就得改成什么，改成立即登立即注册就可以了。

呃，没有账号立即注册，没有账号立即注册，改成这个。嗯。然后呢，我们跳转的位置，我们也要跳转到呃，注册的页面对吧？Re git这几个地方改掉，看其他的地方需不需要改用户名，填写用户名密码，其他的地方先不用，这里边只需要一个用户密码，其他的不需要。提交，嗯，这几个都留在这儿吧，啊路由咱们也留在这就可以了，我们看一下就可以了，立即注册，就是注册的页面，然后呢，也有账号对吧，这两个可以做一个做一个切换，那登录的信息在这里边，如果你输入错的话，他也会等着也提交不了，对不对，如果可以提交的话，那你这块就必须写正确的用户对吧，比如说e do work。

然后啊哈，等等等等，我们现在这一提交就可以提交了，但是提交我们现在。得验证这个信息成功，然后呢，我们才能到数据库，把它加到数据库里边，对吧。加到数据库，那我们就得需要在用户点GS里边专门做一个登录的接口，专门提交我们的这个数据过去。所以呢，我们得。跟注册一样，我们得加一个登录，把这个改成报音Ron，那接口呢，对应的是找一下登录。登录接口是这个。这个然后授权也是提交。那把接口位置换一下。Pass掉，然后post的数据跟那个注册的差不多，提需要提交email和password啊，需要提交这两个，所以呢，咱们。这个位置还得改一下，呃。不是名字，是email。

不是通过昵称去提交，通过是email去提交的，通过去提交，然后这个email提交，那在上面我们就得把这个改成email email，用户名是email的接口，还按接口文档去写，如果他要求用户名，用户名email email，所以要求手机号，手机号，当然你可手机号和用户名那个去切换。去切换，然后我们通过这个里边去提交的时候，在这里边就可以调用这个方法登录的这个方法烙音我们。点开这号方法就不是注册了，这里边是报给了LJN，把它得改过来。然后我们在这里边就去处理登录，那我们输入的数据在这块也是形式的，当然了，如果有验证码什么的，你也可以在这里边去加，都是一样的过程啊，然后我们调用烙音这个方法里边呢，我们传递user e这个信息，双向绑定的信息都在这对吧，就相当于传到我们接口里边这块data，然后通过这接口传给服务器，如果服务器验证成功。

如果服务器验证成功，就会到什么，就会不管成功失败啊，他都会到这里边儿来。只不过把失败的信息咱们，嗯，需要处理一下，处理一下呢，在咱们的所有的请求的部分，嗯，在。这个地方对吧，如果有想有错误提示的话，在这块咱们已经能提示了，对吧，不做处理，所以呢，咱在这块也不用做处理错误信息处理的，那登录这里边儿有几个过程，有几个过程咱们需要写的。呃，一个是呢，第一步一定要，因为服务器会返回什么，会返回一个token，这肯定是是这样的，你看我看接口，如果登录成功，200会返回一个access topic是服务器给我们随机生成的一个码，那咱们授权就是我们返问任何接口的时候都带着这个topic。有token，有token类型对吧，和过期时间也在你客户端多长时间，这个是有效的这么几部分，那我们现在用的呢，我们就用这个就行了，类型是固定字符串对吧，那我们这个就不用获取，我们只获取这个token的值就行了，返回这个，如果登录成功，输入正确了，失败的话，咱们刚才说了，在嗯这块它有提示对吧，咱不用去做，那如果成功的话，这里边。

将将token。呃，Ton保一定要将它怎么着保存到本地？将它这个呃，保存在本地才可以，本地哪块保存格式，因为咱不是用的是cookie，那有的说保存到vuex里边可以，但是记住v exx里边那状态管理你在正常访问没问题，但是呢，一刷新里边数据会初始化的。咱们要想办法让别人再下次再打开浏览器还是登录的状态，对吧，那你就不能一刷新就没有这个状态，所以呢，一定要到保存到本地的硬盘里边，本地硬盘哪块能保存呢？那window对象里边有个什么local stop stores to。啊，I store it包括。

保存到这个里边才可以，这里边呢是保存的字符串，这里边有两个方法，一个是set item，通过设置键和值，但值是字符串的，这样然后还有get it em里边通过什么K就可以获取这个值，所以保证本地在本地一直存在，存在着。所以呢，你通过它可以存到本地，通过它可以取到本地，相当于本地的数据不一样，这样的话我们在任何页面里边都可以去使用。这样的话，将登录的套N放在这里边，那么我们在任何时候请求接口的时候都可以带着ton就可以了，如果带着token，那咱们下边再讲，这里是第一步，要保存到本地。当然保存本地每次使用这个过去比较麻烦，所以呢，我们还可以在什么，还可以在呃V里边，当然V1刷新就没有对不对，在这里边你可以干嘛，可以临时的对吧，保存一个比如说a log音，A log音的一个状态登录，那我们平时判断它是真假就是登录了，所以呢，登录的话这个值在设成帧就可以了，然后我们其他的提示啊，跳转的什么的。都OK了，对吧。都没问题，那首先第一步就是如何保存到这里边，那我们就通过如果登录成功的话，我们就得呃判断一下这个res。

点击一下，就是这个is里边的状态是不是，嗯200对吧，那我们就直接写就行了，假如他的成功了能等你可以去判断一下，判断也行，Local。因为错误的话，他也不会往这里边去保存，它直接如果有错误的话，他也不会到这块直接到什么到开始那里边去处理啊，所以呢，你不判断也行，成功他都会进来。保存到window里边，Lo CL这个里边的有一个什么设置，你看都是字符串的键和值，那键呢，你可以自己随便命名，那我们就叫token token这样的话，在我们客户端一个文件里边就会保存这样的名，然后值什么，如果是保存对象的话，你就要把对象序列化，把整个对象保存这里边，那我们这里边I里边返回的，如果直接保存is是对象，它不能保存到，你需要把对象序列化，但那没有必要，咱只保存对象里边的什么，这个就行了。这几个对吧，只保存这一个在这里面，这样的话，我们一访问数据库的时候，就一点登录的时候输入正确用户密码，那就会在我们这个里边去保存。

再闻到这地去保存，那保存完了之后咱们说，嗯，其实直接这样做，做完登录服务器验证完了之后，直接保存的一个topic就可以了，对吧，其他的呢，你比如说在微微添加，你加不加，其实都是都是没问题的，对吧，那我们还可以什么，如果添加成功，我们做一个提示，做一个提示咱们加一个吧，通过这个这个里边Su成功的提示在这里边。安排一个新提示，就是登录成功。登录成功，然后呢，提示我们再把这里边的user info里边的信息信息给清除掉。等于空，Email等于空，然后这里边user把密码等于空。当然它会自动清空啊，写上也没坏处，然后呢，我们再个太帽子。隔一秒钟，比如说已经登录成功了，我们让它跳转一下，对吧，跳转到哪呢？可以是成功提示你不用太长时间，500毫秒就OK了啊，然后直接ru路由，我们跳转go负一从哪来的，从哪个页面到底登录的，我们就回到哪去。

成功，这就可以了。那我们现在试一下能不能登录成功，但是登录成功我们只是把这个存到本地了，其他没有对不对，我们先看一下会不会提示我登录成功。也是看验证接口，我们登出确我们注册的账号，它需要邮箱edu work edu。Work，然后。用邮箱艾特monkey.com，密码是user user123登提交。你看这有错误，401证明我们这个密码应该写错了，密码写错了，你看没到这来，因为这个都没我们清空了对吧，然后我们是U123US123。你看对。Us，我记得我在这个页面里面记录了一下这个登录的密码。

因为做实验测试什么的输入太多了，Use。Work。Use 123 work work。有。你刷新一下，重新登录一下。E Du work try l monkey.com，然后嗯，123。你好。123忘了忘记了。看一下这个接口。登录401。嗯，消息没有。没有授权跟这没关系啊。来看一下登录登录。存到本地赛达。

Is。我们先看一下这打印一下里边就没执行啊，把res里边的ho。A在抛开，我们打一下RO。你先先注册一个。新注册一个。没有账号立即注册，注册用户名我们叫做e Du work2L，再com，然后这块我们重新注册一下user用户名。这叫U2，然后us user123。USER123，然后邮箱EDU2。点。com。点击右手。注册成功跳能登录，这回我们再试一下，只用e Du work2、Cherry l monkey com。先回到这个地方。

把这清楚，然后嗯。在这块写上一个US1123提交。你看token这边有了没有提示，刚才还是那个密码，注册的时候忘记了，你看这就是给我们返回的talkingn，那把这个ton也怎么的也保存到我们的本地了，也保存本地了，这就是我们登录，但只保存本地，那我们授权还没有这个授权，还没有真正的授权，只是把它保存本地了，那这节课先讲到这儿，那下节课呢，我们再做一个真正的授权，访问任何接口的时候都带着这个ton就OK了。好，谢谢大家。