使用Vuex解决Vue中的身份验证 | vue auth vuex
传统方式中,许多人使用本地存储,来管理通过客户端验证生成的tokens。一个大问题是如何有更好的方式,来管理验证tokens,从而允许我们来存储更大的用户信息。这就是Vuex[1]的作用。Vuex为Vue.js[2]应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。建立应用模块对于这个项目,我们想创建一个使用vuex和vue-router[3]的vue应用。我们会使用vuecli3.0来创建一个vue项目,并从选项中选择路由和vuex。执行...
传统方式中,许多人使用本地存储,来管理通过客户端验证生成的tokens。一个大问题是如何有更好的方式,来管理验证tokens,从而允许我们来存储更大的用户信息。
这就是Vuex[1]的作用。 Vuex为Vue.js[2]应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。
对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。
建立应用模块对于这个项目,我们想创建一个使用vuex和vue-router[3]的vue应用。我们会使用vue cli 3.0 来创建一个vue项目,并从选项中选择路由和vuex。
执行下面的命令开始创建:
$ vue create vue-auth按照对话框的提示,添加必要的信息,并选择我们需要的选项,完成安装。
下一步, 安装axios[4]:
$ npm install axios --save 配置Axios我们在许多组件中都需要用到axios。让我们在全局整体来配置它,这样当我们需要它的时候,不用每次都去引入。
打开 ./src/main.js 文件,并且添加下面:
[...] import store from ./store import Axios from axios Vue.prototype.$http = Axios; const token = localStorage.getItem(token) if (token) { Vue.prototype.$http.defaults.headers.common[Authorization] = token } [...]现在,当我们想在组件内使用axios时, 我们可以用this.$http ,这样相当于直接是axios。我们也可以在axios头部给自己的token, 设置身份验证,这样如果token是必需的,我们的请求将处于控制中。在这种方式下,当我们想要发送请求时,任何时候都不用设置token。
相关课程: Vue创建一个网上商店[5]
完成之后,让我们使用服务器来处理身份验证。
创建身份...