Vue3.x项目全程实录 27_用户登录授权方案处理 学习猿地原创

大家好，我是学习园地的特约讲师高若峰，上节课我们登录处理一半只是我们登录把用户信息发给服务器，然后呢，用正确的用户名密码登录之后，呃，当然登录成功给我们跳转到这个页面，但是登录的我们还没有设置，它只给我们返回了一个这一长串的ton，对吧？那我们在访问任何API接口的时候，比如说这里边所有的其他的地方都需要带着这个token，那怎么带过去呢？你看，假如说我们访问这里边儿的购物车。是不是都需要带着token呢？所有的订单，购物车的信息都是一样的，包括用户详情对吧，更新头像这些都是是一样的，都需要我们去处理，然后这里边有一个。呃，认证授权，你看我们怎么去授权登录，登录成功之后，我们返回的是这一串状态码，对不对，然后呢。呃，退出当然也是有一个接口，他也需要用到这个，咱们用用这个测试一下。那我们看一下，如果我们授权访问任何接口的时候，我们怎么去访问状态，这接口写在哪个里呢？是阿里的注册。

注册。这里面有，然后登录绑定手机，修改密码。呃，文档说明在文档说明里边，你看啊，我们使用GWT认证，需要认证API才能访问，那就需要我们在每一个请求服务器的时候，我们都需要在头部信息里边，我们请求头里边把这个键对应的这个值前面的是认证的类型套类型，然后把这个token加在一起，通过这种方式才能够获取为登录之后对不对服务器返回的token这个token。那需要在请求头上添加，那请求头在哪呢？我们所有的添加的请求接口的时候，我们在这块你看。所有请求接口的地方，是不是我们这是写应拦截，那我们是不是都有一个请求拦截呀，在请求拦截的时候，访问任何一个access的任何一个接口，它都先经过这个，咱们这块是直接放行对不对？那如果有验证的话，既然都经过这，那我们就将这抛泡信息从这块儿带过去，对吧。

那得先判断我们有没有ton，有ton的带过去，不是说所有的接口都需要to对吧，所以呢，我们就判断一下，如果呃，我们先把这个ton先拿出来。说法，呃，Cost tost拿出来一个这个to ton，这个con文在哪拿出来呢？我们window对象里边有个呃，Local store从这里边对吧，里边有什么get ATM只要存键值，我们键值存的就是to kn ho把它拿出来了对吧？然后判断如果to kn，那如果空的话肯定就是假，对不对，如果存在的话就是真，如果存在的话，它根存在，那我们就直接选这个配置这个嘛。将这K里边加个头信息con Fi里边he，头信息里边加上这个A就是。

呃，这里边儿需要我们家的这个属性，通过这个属性。通过这个属性拿过去，然后前边必须加一个什么，加一个这个的空格，然后后边连接上top才可以。按照这个规则写这个类型，好的类型是这个，然后呢空格，然后呢加上。我们的这个token to kn这样的话，我们请求任何一个接口的时候，都会到这里边去来，都会到这里边来，那都会到这里边来呢，那就都会在配置文件里边，就是在我们的这个头部给我们加上一个这个属性，然后呢，按照这个类型的话，涛会给我们带到服器里边，也就是。是使用的是JWT这样的一个认证就可以了。这样的话我们就可以登录成功，就可以访问所有接口了。啊，所有接口啊，那是不是可以访问所有接口，那我们看一下，嗯，假如说我们这里边。有一个嗯，咱们再做一个退出，退出这里边儿需要什么，需要我们使用的就是必须认证才能访问接口，对不对。

那我们在这里边在，嗯。User这里边我加一个接口，是一个退出。这个我就不给你加注释了，登录呃，注册这些信息对不对，你直接看这名称就知道它是代表什么呢老。嗯，Out，退出，然后退出呢，我们使用的请求的方法，看是什么，也是post对吧，那方法留这块，但是退出我们不用传任何东西对吧，不用传任何东西那。嗯。我们不用传其他任何东西，只需要把这个接口改对了就可以了，在这里边把这个接口换成这个接口。这样的话，我们一定用这个方法去退出，那退出按钮在哪呢？我们一般都在个人中心这这个地方，比如说在我们的这个位置。在我们这个位置有我的对吧，但是我在这里边生命也没写呢，咱们就加一个加一个按钮，找到我的个人中心。因为他现在访问的不是页面啊，而是去访问接口，所以在接口的呃，拦截里边，请求拦截里边我们写的这样的一个方法啊，把这数据带过去，那我得找个人中心user这个里面，那我们在这里边加一个。

一个。在这个下面，当然这个人中心里边有可能还有一些其他东西，等咱们，嗯，往后写的时候，再把其他的功能咱们加上，这里边儿呢，咱们只是。嗯，先把这个按钮加上，只是让它能退出就可以了，别的咱们现在先不需要，那我来一个div，然后加一个。嗯。来一个样式吧，让它上边离远一点，比如说Mr market，比如说100个像素，先随便写啊，Marin pop。顶部慢慢给100那左右一百十五，先随便写一个。然后marin marin marin。呃，Pop，我们来一个100个像素。嗯，加上这个，然后呢，我们用这个按钮VVT，咱们缩写VN对不对，然后里边的BOT to加一个这样的一个按钮，然后按钮里边写上，我们写上退出。

嗯。退出登录加一个这个按钮，这个按钮我们找一下啊。八。找一个。这块我看看几个几个属性。这是颜色的属性。状态加载。然后设置方框和圆形，那我们呃，设置一个圆形的。然后呃，大小尺寸呢，咱们呃就不用设置了，设置一个圆形的，然后设置一个块级的就行了，那在这里边我们加上。呃，几个属性，RO roblok加上这两个属性，然后给一个卡的颜色，咱们随便给个颜色井号啊，比如说四四，嗯。

BA。BA，随便写几个，比如说呃，八零。当然按钮颜色你可以什么样的，你可以自己调，这样的话，我们在页面里边个人中心这块，你看多了一个退出按钮，对吧。那多了一个退出按钮，在这个退出按钮里边，我们就可以加上什么，加上点击事件click click点击事件，那我们到这里边让他去log out去退出，那就需要加一个这个方法退出的方法啊。这个方法呢，我们就需要在setup里边写上。三二加上这个方法，首先呢，我们cost声明一个这个方法，To log out这个方法。加上一个箭头函数这里边，然后我们需要把这个方法拿出去，To log out。在这里边我们就可以呃调用这个接口了。里边什么也不用传，当然这个logout我们有用的时候，你需要在哪呢？IPO引入。

Out里边from，从night下边的有个user里边我们拿过来。报告，那就可以调用这个方法，调用这个方法那就是就可以啊帮我们退出了，但是这个方法。这个方法里边需要授权的，那我们在请求这个方法的时候，请求这个接口的时候，也就在这块请求接口的时候，它已经请求这个接口，通过这里边request它已经执行了什么，执行了这块就会把这套带着，那就能通过对吧？能通过的话，那我们在这块就可以直接这个方法调用就可以成功了，那然后我们在这里边res。执行一下，如果成功的时候，退出成功，我们看一下给我们返回的一个一个状态，呃，状态码是204，状态码是204，退出成功，那我们就可以判断一下，如果res.ST呃，STTS如果等于204，那我们就是成功的，但是你不判断也行了，因为它就返回这个知道吧，对不对，然后我们做一个呃，Iport。

用我们的那个轻提示轻提示轻提示那个是叫呃t house，这然后从那个VT里边，VT里边引入，这样的话，我们就可以通过请提示提示它怎么着退出成功to post，然后点啊成功这里边加上退出成功。退出成功，接这样一个提示已经可以了，但是我们还想怎么着都退出了对吧，那我们是不是得把这个token给我们清除啊，对吧。清除清除清除清除ton哪个里边ton window对象里边的对吧，L CL local stop sqr cover里边的这个token对吧？把这个清楚，那就是直接改调谁呀，Window对象里边lo，呃，Lo它没提示呢。

Window window加ROC，这提示了这个方法，这个属性里边的set还是用它提示，那么我们把ton talkingn把它的值设成空，对吧，就把它清除了，那退出时候就没有了。嗯，退出时没有了，然后呢，我们在这里边，呃，就跳转再太帽隔一段时间跳转退出成功，那咱也不用去太长时间，比如说我加上500毫秒跳转哪呢RO。当然我们得把这个路由。组合偏这每一个都得引入啊QRT，引入这个us。然后我们从VEVE这个里边。获取到这个router，然后呢，我们在这里边给加上cost Lu等于u router拿过来，这样我们就有路由了，有路由了五秒钟对吧，五秒钟Lu有500毫秒，不是五秒钟啊，Push让我们跳转到哪去呢？加一个对象p pass跳转到我们的烙音就退出了，将让它到那个登录页面就可以了。

现在我们看一下这块会不会出错，嗯，在这块来。现在我们刷新都没问题，你看对吧，点击退出，如果提示退出成功，证明这个接口我们是能访问的，如果有错误就会在这块提示错误。退出退出成功啊，在登录界面没有任何错误，说明我们这个是授权成功的，对吧，是可以的，那我们现在再登录一下，我们是e do e do work。Edo work里边的。一二。这个密码是US123提交。登录成功。从哪个页面登录，它就回到哪个页面，看到了吗？回到哪个路，这是咱们在前边登录这块，谢谢了，只有登录成功了，对吧，这就是一个完完整整的一个授权的一个过程。

那有的授权过程，那我们假如说有没有一些页面。需要。因为我们这儿只是接口层次的限制，限制必须授权，其实这已经够了，但是有的时候呢，我们一些页面，我们也需要判断是登录的，我们才怎么怎么做对不对，所以呢，这样的话，我们用状态管理做会比较好一些。因为不然的话，每次都判断这个套存不存在对不对，太麻烦了，那我们就用状态管理，我们再稍稍做一个加一个功能啊，其实不需要了，这样已经已经是可以完成了，对不对，这正好我们在先简单之前，我们先把这个还得完成一下，那如果登录的信息对吧。出错了。登录信息出错了，你看如果授权出错了，就没有授权去访问了，访问这块对不对，所以呢，咱们统一让他去就访问接口的时候，如果哪个接口不要访问，那我们让他出错，咱让他访问其他的就是相当于回到。啊，让动物对吧。因为现在哪个接口还是一样访问，没数据还是一样访问的，对不对，没有只有错误提示啊，假如说没有登录的，我们直接让他去登录就可以了，那我们那是返回请求接口的时候，那没有授权它返回的是一个错误，所以得在错误的处理啊，成功这块没有必要去处理东西，对吧，处理东西都是把这东西放在页面上，所以你在哪用在哪写就行，主要是我们响应拦截的时候，在错误这块处理的东西的时候比较多，响应拦截的这块比较多。

那这里边我们就得判断一下这个响应的啊，E点里边的，比如说re响应，这响应里边的状态，这都是固定的啊，响应的状态码，响应状态码一般的如果不是授权的返回的一般都是没有授权访问的就告诉没有权限，一般的都是好像401，你看状态码啊。状态码401，你看未授权的对吧，需要请求实名验证的，所有的访问接口的时候，如果没授权它访问都是401，如果是401的话，那么我们在这块就能跳转到我们登录页面，那通过这个呃，加一个。

提示吗？在这块加上这个，然后我们用这个里边的。呃，直接用这个，它里边有个to，里边有有成功也有失败失败，失败失败是al失败的方法，然后告诉他请先登录请先。请先登录。然后呢？自动让他跳转到登录的就好，咱们现在已经有登录的那个对不对，这里边有没有路由。啊ror啊，没有路由，咱们得在这块得加什么iPod这里边不是在组件里边，我们直接那点入这里边的路由就行了，那比如说这个路由当前的是这个目录路由，是它的上一节目录下的RO加这里边，通过这里边把这个路由拿过来。这里边儿，因为这个路由就直接是在我们路由里边注册的，找到你看就在这里边儿，你看我们都已经。

最下边返回这个路由嘛，对吧，所以呢，我们需要在这个里边直接引入这个路由，然后调用这个路由。嗯，你可以设也设置几秒钟去跳转。当然你不设置几秒钟，直接直接跳转也可以点psh，然后呢，我们在这里边加一个注册一个地址PH，呃，Pass到哪去呢？到不用加任何参数就可以，这样的话，假如说我们不是登录的去访问这个，它就会跳转要我们重新登录。你比如说我们在这个里边。现在我退出。退出现在是登录，但是我们这个页面现在还可以访问，对不对，我现在再点退出，你看提限登录提示我这个对吧，又过来了，所有的没授权的，没授权的访问的时候，他都会到这边提示，然后提现登录跳转过来。当然你可以设置几秒钟跳转过来啊，也是可以的，所以这个地方不要写这样的话，不然的话错误的话没有提示对吧，这块只是那个消息有错误的时候，接口消息有错误的时候是这样，如果正常的没有授权的消息，咱们是这么判断。

都让他统一的登录接口就行了。那他说了，还有一个，你比如说访问接口的时候，就是直接访问页面的时候，比如购物车，我们假如说不行的话，页面他登录就是没有登录，不让他直接访问，这是直接在路由级级别判断，那在路由级别判断呢，咱们最好是在状态管理里边加一个，所以呢，在这里边咱们就把这个状态管理，呃分一分，当然状态管理它默认是不是都写在这一个文件里啊，那现在咱们可以把它什么呢？把它写在。呃，多个文件里边。就把这个里边呃分开，但是不分开在这里边写也是可以的，大型项目的话，状态有可能很多，所以呢，咱都会把它分开，比如音代这些音带信息。嗯，这里边分还不分呢，因为咱们用到的不多，我OK不分了，因为咱们讲讲这个路由的时候，咱们前边呃，这个状态管理上说过，如果状态很多的话，会把这个文件拆分，对吧？拆分成很多个小文件，我还给你拆分一下吧，因为咱们毕竟是学习的啊，拆分一下新建一个呃，GS文件，你比如说这里边会有呃，Get，然后呃，Mus action对不对，模块就不用分了，那这几个咱们单独的把它都拆成独立的文件，比如说aon，嗯，s.JS，拆分一个这个文件。

然后再把它拆分成一个。嗯。叫嗯，TT。呃，s.JS然后呢，我们还需要去拆分。不用，也不用拆太多，当然还可以电子目录拆很多层对不对？MU muts拆成第三个文件就可以了，然后我们在index这里边，我们只需要怎么着单独的去引入这个文件就行，不用说我们在每一个里边，呃，都单独去写，比如说我把状态放在这块。当然上面我得引入所有的这个文件，比如说嗯，Tas，比如说引入这个文件from从哪呢？从当前步骤下，MU。

呃，TS。那个是正常。从这里边单独引入。引入这个文件，然后呢，引入这个文件，我在这块就把这个换掉了，这个对象里边导出就是这个对象对吧，那我直接muts，那它俩又是一样的，所以呢，我们用一个就行了，对吧，用一个就行了，然后呢。在导入呃，导入ACS pro，从当前目录下AONS。找过来，然后这里边也直接引入这个文件内容，相对于划分一下那模块呢，这个咱们不需要，基本上咱们把它去掉就行了，然后呢，还需要一个呃，GTS。当然，咱们得先按导入get from，从当前目录下get加导入。这样的话，我们这里边再加上什么get gtt s导进来，但是这状态我们也可以单独把它拿出去，要单独拿出去，然后呢，我们生明一个con con ST啊，STT状态跟它是一样的名称，这样的话直接导进来，所以把它放到外边，这样呢写起来就比较方便了，你比如说我们这里边加一个呃，用户信息，或者是用户信息里边的，嗯。

A log音或者直接加a log音都行，A音我们就要处理这个方法。默认比如说是假值没登录的，是价值没登录的就可以了。嗯，在这里边。这块不能是分号原价，然后呢，我们在这里边每一个里边都需要导出这样的方法，你比如说我们现在在呃，MU里边，那我这里边就得做一个，因为它每一个都是竞入对象嘛，所以直接导出就可以了，在这里边你比如说cost生明一个muta啊。T啊，Mut。

然后等于这样的一个节能格式，然后我们把它。导出缺省的格式，呃，DUMU，这个这样的话，我们在外边引入的时候，就是引入这个对象，我们把所有的方法就可以放在这里边，你比如说我们设置用户登录的状态。前面咱们用的。嗯，所有的这里边的状态，刚才我只写了一个用户里边登录信息，对不对，所有这里边状态咱们必须经过mut去办，而不是直接设置，所以这里边咱们就比如说设置啊，A登录ROJN那登当然了，我们这块可以，如果你设置多个用户信息的话，你这块。用对象行，这里边用用此对象，如果不是多个信息的话，就一个值，你直接写它就行，不用外层再封装对象啊，那咱们假设后边有可能会封到多个值，那咱们先这么做，然后在名词里边，那我们就解决方法，Set a log v，设置这个是否登录的，那这块是固定值，把状态就拿过来，然后呢，附带的资源。

这换过来，然后这里边就是tte里边的user里边了，就把它放在user里了，A log，那只等于我们附带的这个资源，就相当于附件传过来的，对吧，那我们调用这个方法的时候，就可以给他设置。呃，设置内容了，那除了这个方法，这里边还有什么，嗯，Action。还有action这个方法，那action方法呢，由异步处理的时候我们才使用，对不对，但是呢，我们先把这个格式先说明上acts。等于等号，然后我们这块导出EPT，现在展示咱们呃用不上这个，呃以后acts，然后同样在这个。嗯。Get里边，嗯，相当于计算属性对吧，计算属性这里边我们也需要把这个导出，但现在咱们也不需要它用到什么东西，所以呢，我们直接还是导出这格式就行， GTt12导出等于大括号，然后。

嗯，这里边ES导出缺省的，缺省的。Get。就可以了，现在咱们就拆分了，你不拆分的话，都写在一个里边也可以啊，就拆分这么几个，那现在呢，咱们有设置值了，现在如果我点登录的时候。选择呃，登录的时候，那我们就可以直接把这个值给设置上，也就是还有问题太多了。嗯。找一下登录，你看在登录的时候，如果在iOS里面存了一个这样的状态，对不对，那我们是不是就可以在这个里边去，呃，处理我们的我们的信息啊，那怎么处理呢？是不是我们需要使用。当然我们想使用状态管理，一定得在这块加什么iport引入，呃，我们的使用这个状态这个方法从哪个里边呢？从v u exx里边把这个状态得拿到我们才能使用的状态管理，所以用状态管理里边，我们只需要因为不能直接改变状态的值，需要使使用这个里边的方法去设置值，对吧，那这个呢，不用咱们传，咱只要传一个附件就可以了。

然后再登陆这边。Sre，当然了，前边我们想使用这个SQ re的话，我们一定得再像物流一样提T得声明，然后等于U。你把这个拿过来，然后我们在这块。嗯，才能使用to里边的，我们想调用什么，调用commit，调用这个里边的方法对不对，提交给这里边方法，用那个方法去执行那个方法，咱们叫做嗯，Set is login啊，你要起名有规范的话，你就不用看，你就知道使用这个名对不对，然后设置值TE是真，那我们在别的地方判断这个值是真就可以了。但是这么设置的话，嗯，这么设置是真，那我们在这个地方退出的地方退出退出。

嗯，这里我们找到这个退出。除以啊。取出，我们写在这个里面。在这块清除这个草根之后，我们在这块是不是得把它设成什么甲，对吧，当然这里边我们也得把这个拿过来。嗯，Iport是UE，主要从v exx这里边，然后。这块请问ST cost，呃，Q等于us，这里边拿过来。这样的话，我们一提交也把它清除一下假真假值就可以了，但是这个我们设置真假我们要判断，其实不太准，咱们说了状态里边我们一刷新怎么着，一刷新它里边就没了，对不对，你就登录了上帧，那么一刷新它又回到了默认值，也就是在。这个里边。三节课我就会把所有的文件都关掉，这写这节课先拍着吧，它就会变成甲对吧，是这样的一个形式，那我们想让所有的都不是甲，也就是跟着我们本地存储那个去判断，因为主要是使用这个A音判断的时候时候怎么着，我们会感觉会方便一些。

没别的作用，就是感觉方便一些，其实不用它我们完全可以，不用它完全可以，那所以在这块我们这个不用自己假值，我们用什么，你看我们用window点这里边，咱们不用location RO local到这里边itm。然后过去它这里边儿的谁呀。To ton，你就每次刷新它的本地，它会一直存在，在本地会一直存在，对不对，然后如果它存在，我们就把它设成真，对吧，你刷新的时候它存在就是真了，否则就是假。这就可以了，但这个50多号。这样的话，我们就可以判断在任何里边使用这个呃状态里边的内容了，就没问题了。啊。那我们说了，现在做登录页面，这个登录页面判断，那我们这块怎么判断呢？就是。现在我们可以随意访问购物车和我的对不对，如果是登录可以访问，那我们不用每一个页面都单独的判断这个状态，我们只需要在哪啊，咱们是不是有路由导航首例啊。

路由导航首位对不对，在这里边你看。有一些页面，如果前面咱们写过这块。如果有一些页面是需要登录才能访问的，登录才能访问的，那我们就在这块去写就可以了，你比如说现在咱们的个人中心。嗯，个人中心这块，当然我需要在个人中心里边我加上另外一个原数据，你比如说判断是否需要AU，这样的话，我们写每一个路由的时候，我们都加上这个就可以了，会很方便ATH啊是否授权。判断那个确认R，确认re q I，那你随便哪个列念啊，是否授权确认确认授权对吧，加上这个属性就可以了，那我们个人中心学用这个，比如说我们的购物车。购物车，购物车分类，这购物车我们在这个里边也加上这个。如果需要授权才要访问的，我们加上这个属性，但在这加只是一个变量，对不对，我们需要在这块判断。

需要在这个地方去授权判断一下，也就是如果什么这个to。因为我这是什么，前置这个导航首位对吧，前置导航首位就是你要访问哪个到哪个里边去，对不对，要到的那个里边，里边有一个什么，有一个是否需要授权的判断，你比如我们要到购物车里边去，购物车里边这个他是不是真。如果它存不存在，或者它不是真，当然这个得找到它里边的原元素Meta原元素里边这个属性，看它存不存在，存在并且是真的情况下，对吧，然后呢，我们还得。存在并且什么，并且我们用户得是呃。判断一下这个也是state里边，State这个状态里边的用户里边的it love对吧。它如果等于甲，你看啊，这里边儿也就是如果，嗯，这个默认咱们需要授权。

你看啊，需要授权对吧，但是呢，在登录状态里边，咱们判断这个A字音，如果它是假的，就证明什么没有登录，还需要授权，还并且呢，没有登录，那这个时候我们干嘛呀，那肯定让他去。我们到nest通过这里边第三个参数给它转到，就不用主动转了，Log让他到登录页面去对不对，如果不需要授权对吧，或者是登录的，那我们直接。怎么办？那下去就行了。对吧，那这块前面呢，我们可以加一个提示。提示这里边我们看一下加不加那个意大利提示我们。到。你看这里边找一个这个过来。嗯，到这里边儿不是这个里边由由这里面加这个。这俩都加上没关系吧。用哪个提示都行。

然后我们在这块提示他一下，也就是你你还没有登录对不对，必须登录之后才能访问，加上这个提示。然后您还客气点啊，您还没有登录对吧，请先登录登录。这样的话，我如果是登录的，那就这块就不执行了，是登录的，不管他授不授权的都不执行，直接往下走对吧，如果需要授权并且没有登录的话，是不是直接给我转到提示我，并且让我登录啊就可以了，那现在我们来看一下。这里边儿现在有个嗯道没有定义，这里边我把这个。在这里边，因为它用到了存储里边，对吧，IPO引入啊store，然后嗯，From从这个上级目录下的，嗯。S，这里边拿过来。好，你看你还没有登录就过来了，对不对，现在我访问首页的。

没问题，他要访问这里面没加授权，这也没加授权，但是我点购物车，你看购物车的时候，在路由这里边儿，你看我加了这个。购物车加了个人中心加了这个，然后还有我们的购物车加了这个，这两个都必须要我们确认授权，所以呢。如果访问授权没有登录判断这个就到这来，并且我们这个登录的是假的，没有登录的都过来，对不对，这两个条件。你看我现在点购物车，你看你还没有登录，直接把这个点，比如从分类到这个，你还没有登录到个人中心也不行了，那我们现在登录一下edu work2。这个邮箱，然后我们加上U4123提交。登录成功，你看登录成功的时候，我就可以访问购物车没问题，但购物车是空的，访问我的没问题，当然问题点退出就退出了，对不对，只是登录成功就可以访问的，不登录是不要访问的。你就可以这么做，但是购物车登不登录，你可以不让他访问就可以了。

下面提示那个是没有权没关系啊。那。当然这网有点有点有点慢啊，刷新一下这个数据出来了。好，这就是我们这节课内容时间比较长了，这节课咱们讲的内容还比较多，主要是判断如何授权这样的一个过程，有的是页面级别的授权，对吧，有的是接口级别的授权，那这两个级别都给你写了，都在一起写的。