vue生成token保存在客户端localStorage中的方法

在前端开发中，我们经常需要将生成的token保存在客户端，以便后续使用。今天，长沙网络推广要分享给大家一个关于如何在Vue应用中生成并保存token到客户端localStorage的方法。这不仅是一种有效的做法，而且非常实用。接下来，让我们共同了解这一过程。

我们先了解一下localStorage。这是一个浏览器提供的存储机制，我们可以在客户端使用它保存数据。对于我们的Vue应用来说，我们可以使用localStorage来保存从后端接口获取的token。

假设我们有一个后端接口，地址是：[

对于跨域问题，后端需要设置相应的响应头来允许其他域名访问。在PHP中，你可以设置如下响应头：

```php

header("Access-Control-Allow-Origin: "); // 允许所有域名访问

header("Access-Control-Allow-Methods: GET,POST"); // 允许的HTTP请求方法

header('Access-Control-Allow-Headers: X-Requested-With,content-type,if-modified-since'); // 允许的HTTP请求头

```

接下来，我们来谈谈前端的操作。在Vue应用中，我们通常会使用VueX来管理状态。我们可以在Store中创建一个module来处理用户登录的业务。假设我们创建了一个名为UsersModule.js的文件来处理相关业务。我们需要在入口文件（如users-index.js）中引入这个模块。

在UsersModule.js中，我们可以编写一个函数来调用后端接口获取token，并将token保存到localStorage中。例如：

```javascript

// 假设这是一个API调用函数，返回Promise对象

function fetchToken(client_appid, client_appkey) {

return axios.get(' {

params: {

client_appid: client_appid,

client_appkey: client_appkey

}

});

}

// 在VueX的action中调用上面的函数，并将token保存到localStorage

export const actions = {

async login({ commit }, payload) {

const { client_appid, client_appkey } = payload;

const response = await fetchToken(client_appid, client_appkey);

const token = response.data.token; // 假设后端返回的token在response.data对象中

localStorage.setItem('token', token); // 将token保存到localStorage中

}

};

```

以上就是在Vue应用中生成并保存token到客户端localStorage的方法。通过这种方式，我们可以方便地在前端使用保存的token进行后续的操作。希望这个分享对大家有所帮助，也欢迎大家提出宝贵的建议和反馈。在`users-index.js`中的修改与重构

我们引入所需的模块。

```javascript

// 引入模块

import ResModule from './../Store/modules/ResModules';

import UsersModule from './../Store/modules/UsersModule';

// 配置vuex store

const vuexConfig = new Vuex.Store({

modules: {

res: ResModule,

users: UsersModule

}

});

```

这个文件定义了关于用户状态的一些逻辑，包括从本地存储获取用户信息以及发送登录请求等。让我们逐一看一下并进行适当的优化。

1. 状态的获取：对于`currentUser`对象中的`UserName`和`UserToken`的获取，使用getter函数是一个很好的做法。这部分代码无需改动，很好地保持了原意。

2. Mutations的处理：在`setUser` mutation中，你保存了用户名和token到本地存储。这部分代码清晰且易于理解，无需改动。

原代码：

```javascript

userLogin(context, {user_name, user_pass}){

// 发送get请求做权限认证（真实开发建议用post的方式）

let url = "

console.log(url);

Vue.http.get(url)

.then((res) => { ... })

.catch((res) => { ... });

}

```

```javascript

userLogin({ commit }, payload) { // 使用commit来触发mutations，payload包含登录信息

const { user_name, user_pass } = payload; // 直接从payload解构出登录信息，增强代码可读性

const url = buildLoginURL(user_name, user_pass); // 假设有一个辅助函数buildLoginURL来构建登录URL，增强代码的可维护性

try {

const response = Vue.http.get(url); // 发送GET请求到后端服务器进行验证（真实开发中建议使用POST）

if (response.ok && response.data && response.data["aess-token"]) { // 检查响应是否有效且包含token信息

const token = response.data["aess-token"]; // 获取token信息准备保存到本地存储中

if (token) { // 如果token存在且不为空字符串，则进行后续操作如保存用户信息到本地存储等。这里省略后续代码以保持简洁性。在实际应用中，需要调用commit方法提交mutation来更新状态。否则根据业务需求给出相应的提示或错误处理逻辑。} else { // 如果token不存在或者为空字符串的话抛出提示如"验证未通过"等} else { alert("用户名密码错误"); } } catch (error) { alert("请求失败"); } // 错误处理逻辑部分可以根据实际需求进行更详细的错误提示和处理操作}注意：上述代码是基于你提供的代码片段进行了一些假设和简化处理以增强代码的可读性和可维护性在实际应用中可能还需要考虑更多的细节和错误处理逻辑例如后端API验证失败时的处理逻辑等同时请注意在实际开发中建议使用POST方式进行权限认证因为GET方式可能导致安全风险而使用Vue的HTTP客户端进行请求时需要确保其与Vue的版本兼容此外考虑到实际开发中的安全性问题请确保使用HTTPS协议进行通信而不是直接使用HTTP协议通信以保护用户数据的安全走进userlogin.vue的世界，我们在此进行一场关于验证与存储的编程舞蹈。

当我们在login方法启动验证流程时，借助element-ui框架的$refs["users"].validate方法，对用户的输入进行严谨的检查。如果验证旗帜（flag）高高飘扬，意味着用户已正确填写信息，此时我们将用户的名字存储在localStorage中，并向用户展示一个振奋人心的“用户登录成功”的提醒。我们还会将用户信息发送到后台进行进一步处理。这一切都在login方法的舞台上进行，每一个步骤都精确无误。

然后，我们的视线转向会员后台。在这个舞台上，我们需要获取用户的登录信息，比如用户名，并将其展示在导航栏上。这一任务在member-index.js文件中进行。我们引入了ResModule和UsersModule两个模块，并用它们构建了vuex_config这个全新的Vuex.Store。在这个舞台背后，我们构建了一个强大的数据存储和管理系统。

接下来，在导航栏组件navbar.vue中，我们可以通过简单的语句{{this.$store.state.users.currentUser.UserName}}访问users模块中的属性，轻松获取并展示用户信息。这样的方式不仅方便，而且保证了数据的实时性和准确性。

至此，我们已经完成了一次关于验证、存储和访问用户信息的编程之旅。在这个过程中，我们深入了解了userlogin.vue、member-index.js和navbar.vue等文件的角色和功能，也体验了Vuex的强大和便捷。希望这篇文章能对你的学习有所帮助，也欢迎你继续关注狼蚁SEO，一起更多的编程世界。

在这个数字化的世界里，我们的每一次点击、每一次输入都在构建一个庞大的数据帝国。通过这次的编程之旅，我们更加深入地理解了如何验证用户信息、如何存储和访问这些数据。让我们一起在这个编程的舞台上，继续、学习和成长。