vue中使用vuex_使用Vuex在Vue中处理身份验证

vue中使用vuex

Traditionally, many people use local storage to manage tokens generated through client-side authentication. A big concern is always a better way to manage authorization tokens to allow us to store even more information on users.

传统上，许多人使用本地存储来管理通过客户端身份验证生成的令牌。 人们始终关心的一个更好的方法是管理授权令牌，以使我们能够在用户上存储更多信息。

This is where Vuex comes in. Vuex manages states for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

这就是Vuex进入的地方。Vuex管理Vue.js应用程序的状态。 它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行更改。

Sounds like a better alternative to always checking localStorage? Let’s explore it.

听起来像是始终检查localStorage的更好的选择？ 让我们来探索它。

先决条件 ( Prerequisites )

1. Knowledge of JavaScript
   JavaScript知识
2. Node installed on your local system
   安装在本地系统上的节点
3. Knowledge of Vue
   Vue知识
4. Have Vue CLI installed
   安装了Vue CLI
5. Have read Vue Authentication And Route Handling Using Vue-router ― Scotch
   已阅读使用Vue路由器― Scotch的Vue身份验证和路由处理

设置应用程序模块 ( Setting up the application modules )

For this project, we want to create a vue application that has vuex and vue-router. We will use the vue cli 3.0 to create a new vue project and select router and vuex from the options.

对于此项目，我们要创建一个具有vuex和vue-router的vue应用程序。 我们将使用vue cli 3.0创建一个新的vue项目，并从选项中选择router和vuex。

Run the following command to set it up:

运行以下命令进行设置：

$ vue create vue-auth

Follow the dialogue that shows up, add the necessary information and select the options we need and complete the installation.

按照出现的对话框，添加必要的信息，然后选择我们需要的选项并完成安装。

Next, install axios:

接下来，安装axios ：

$npm install axios --save

设置Axios (Setup Axios)

We will need axios across many of our components. Let’s set it up at the entry level so we do not have to import it every time we need it.

我们将需要在许多组件中使用axios。 让我们在入门级进行设置，这样就不必每次都需要导入它。

Open the ./src/main.js file and add the following:

打开./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
}
[...]

Now, when we want to use axios inside our component, we can do this.$http and it will be like calling axios directly. We also set the Authorization on axios header to our token, so our requests can be processed if a token is required. This way, we do not have to set token anytime we want to make a request.

现在，当我们想在组件内部使用axios时，可以执行this.$http就像直接调用axios。 我们还将axios标头上的Authorization设置为令牌，因此如果需要令牌，则可以处理我们的请求。 这样，我们不必在要发出请求的任何时间设置令牌。

When that is done, let’s set up the server to handle authentication.

完成后，让我们设置服务器以处理身份验证。

设置服务器进行身份验证 ( Setting up the server for authentication )

I already wrote about this when explaining how to handle authentication with vue-router. Check out the Setup Node.js Server section of this

在解释如何使用vue-router进行身份验证时，我已经写过有关此内容的文章。 查看本节的“ 设置Node.js服务器”部分

安装组件 ( Setup Components )

登录组件 (The Login Component)

Create a file Login.vue in the ./src/components directory. Then, add the template for the login page:

在./src/components目录中创建一个文件Login.vue 。 然后，为登录页面添加模板：

<template>
 <div>
   <form class="login" @submit.prevent="login">
     <h1>Sign in</h1>
     <label>Email</label>
     <input required v-model="email" type="email" placeholder="Name"/>
     <label>Password</label>
     <input required v-model="password" type="password" placeholder="Password"/>
     <hr/>
     <button type="submit">Login</button>
   </form>
 </div>
</template>

When you are done, add the data attributes that would bind to the HTML form:

完成后，添加将绑定到HTML表单的数据属性：

[...]
<script>
  export default {
     
    data(){
     
      return {
     
        email : "",
        password : ""
      }
    },
  }
</script>

Now, let’s add the method for handling login:

现在，让我们添加用于处理登录的方法：

[...]
<script>
  export default {
     
    [...]
    methods: {
     
      login: function () {
     
        let email = this.email 
        let password = this