用户登录

在我们开发的 Vue 应用里,经常需要判断当前用户是否已经登录了。 回到项目,打开这个 auth.store 模块,在这个模块的数据里添加一个 token ,类型可以是 string 或者 null,这个 token 就是服务端给当前用户签发的令牌。

在模块的 state 里面,添加一个 token,默认的值是 null。 然后添加一个 getter ,这个获取器的名字可以叫 isLoggedIn,表示当前用户是否已经登录了,它返回的值是 true 或者 false,这里可以判断一下 state 里的 token 有没有值,如果有,就返回 true,如果没有就返回 false。

在 mutations 里面再定义一个修改 token 用的修改器,设置一下 state.token 的值,让它等于 data。

auth-login

然后打开 auth-login 这个 Store 模块,找到 login 这个动作,成功获取到了数据以后可以 commit 一个 mutation,类型是 auth/setToken,值是 response.data 里的 token。

因为这个 mutation 不在当前这个 store 模块里,所以要提供一个选项参数,把 root 设置成 true 。

app.vue

打开 app 组件,先在这个组件里导入 mapMutations ,这个东西来自 vuex,把这个导入放在最上面。

在组件里添加一个 methods 选项,然后把执行 mapMutations 返回的结果放到这里,本地组件里叫 setToken,对应的是 auth 模块下面的 setToken 这个修改器。

然后再添加一个 created 生命周期,创建这个组件以后可以去做点事情,要做的就是获取存储在本地浏览器上的令牌值。添加一个 token ,用一下 getStorage ,数据的名字叫 nid ,这是当初我们在存储令牌数据的时候给它起的一个名字。

下面判断一下,如果 token 有值,可以去做点事情,要做的就是执行一下组件里的 setToken 这个方法,把 token 值交给这个方法。

使用

再找个地方用一下 isLoggedIn , 打开 app-home 组件,添加一组 script ,默认导出一个对象,然后导入 mapGetters ,来自 vuex ,在组件里添加 computed 选项,把执行 mapGetters 得到的结果放进来,本地组件里叫 isLoggedIn ,对应的就是 auth 模块里的 isLoggedIn。

然后在组件的模板里,绑定输出这个 isLoggedIn 的值。

预览

回到浏览器再试一下, 回到应用的首页,你会发现这里显示 isLoggedIn 的值是 true,表示当前用户是登录的状态。

把本地存储里的这个 nid 删除掉,然后刷新一下应用页面, 这次 isLoggedIn 的值就变成了 false,表示当前用户没有登录。

回到登录页面,输入用户名,还有对应的密码,点击 登录。 成功以后再回到首页,isLoggedIn 的值就又变成了 true 。

定义表示当前用户是否登录的获取器(isLoggedIn)《 Vue.js 项目实践:身份验证 》

统计

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

社会化网络

关于

微信订阅号

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