用户登录

用户在登录表单输入用户还有密码,点击登录按钮以后,我们的应用要去请求服务端的登录接口获取用户的令牌。服务端的登录接口会检查请求里的用户名还有密码是否匹配,如果匹配就会给这个用户签发一个令牌。这样我们在前端应用这里就可以拿到这个用户的令牌,然后可以把它存储到本地。

先去创建一个 Store 模块,放在 src/auth/login 的下面,名字是 auth-login.store.ts,在这个文件里输入 vsl ,按下 tab 键可以快速得到的一个带 loading 数据还有请求方法的 store 模块。这个代码片断是我们在项目里自己定制的。

先设置一下 Store 数据的类型,可以是 AuthLoginStoreState,按下 tab 键。继续设置一下 Store 模块的名字,authLoginStoreModule。再按下 tab ,设置一下定义的这个动作的名字,设置成 login,按下 tab,请求用的方法设置成 post,请求的地址是 /login,这个地址就是服务端应用提供的用户登录接口。

按下 tab,设置一下请求响应回来的数据的类型,名字是 LoginResponseData。 按下 tab 键,设置一下数据的名字,可以是 loginResponseData。

响应类型

下面可以设置一下响应数据的类型,请求用户登录接口,返回的数据里面有一个 id 属性,类型是 number,还有一个 name 属性,类型是 string,还有一个 token ,类型也是 string。

刚才我们创建这个 Store 模块的时候,用了一个代码片断,这个代码片断就是在 .vscode/vue.code-snippets 这个文件里定义的。

解释

我们再简单回顾一下刚才创建的这个 Store 模块。 这个 AuthLoginStoreState 是这个 Store 模块里用的数据的类型 ,也就是模块的 state 属性的类型。

模块的名字叫 authLoginStoreModule, 模块里有两个数据,loading 还有 loginResponseData 。 还有两个 getter 方法,一个是 loading 返回的就是 loading 这个 state。 loginResponseData 这个 getter 返回的值是 loginResponseData 这个 state。

在 Mutations 里面定义了两个修改器,setLoading 可以设置 loading 的值,setLoginResponseData 修改的就是 loginResponseData 这个数据的值。

在 actions 里面定义了一个动作,名字叫 login,这个动作会去请求服务端应用的登录接口。 请求成功以后会把请求回来的数据交给这个 Store 模块里的 loginResponseData 数据。

请求出现问题的话会 throw 错误里的响应。

authLoginStoreModule

下面再去创建一个 Store 模块,放在 src/auth 的下面,名字是 auth.store.ts ,在这个文件里定义一个 Store 模块,模块里的数据类型是 AuthStoreState,模块的名字是 authStoreModule。

再设置一下这个数据类型,里面添加一个 login 属性,类型是 AuthLoginStoreState,编辑器会自动帮我们导入这个东西。

然后在这个模块里可以再添加一个 modules 属性,它里面的东西是这个模块包含的其它的模块,添加一个 login,对应的是 AuthLoginStoreModule 模块,编辑器会自动帮我们导入这个模块。

app.store

再打开 src/app 下面的 app.store ,先修改一下 RootState 这个类型,里面添加一个 auth ,类型是 AuthStoreState 。然后在这个 Store 的 modules 里面, 添加一个 auth ,对应的是 authStoreModule 模块,编辑器会帮我们导入这个模块,还有模块里的那个数据类型,它们都来自 auth.store 这个 Store 模块。

定义用户登录 Store 模块(authLoginStoreModule)《 Vue.js 项目实践:身份验证 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点