vue获取登录页面用户信息

以下是获取登录用户信息的Vue代码示例：

// 从localStorage中获取用户信息
let name = localStorage.getItem("name");
console.log(name);

// 从cookie中获取用户信息
import { getCookie } from 'src/js/cookieUtil'
let userInfo = getCookie('userInfo');
console.log(userInfo);

在上述代码中，我们首先使用`localStorage.getItem()`方法从本地存储中获取用户信息，然后使用`console.log()`方法将其打印出来。接下来，我们使用`import`语句导入了一个名为`cookieUtil`的模块，并使用其中的`getCookie()`方法从cookie中获取用户信息。最后，我们再次使用`console.log()`方法将其打印出来。

相关问题

vue登录后获取用户信息

在Vue中获取用户信息通常需要进行以下步骤：

1. 用户登录后，后端需要返回一个token，把token存入浏览器的cookie或localStorage中。

2. 在Vue应用中，可以通过Vue插件vue-cookie或vue-localStorage等直接读取cookie或localStorage中的token值。

3. 在Vue组件中，可以通过axios或fetch等网络请求库发送请求，携带token到后端获取用户信息。

4. 后端需要验证token的合法性，并返回用户信息，前端再将用户信息显示在页面上。

下面是一个简单的示例代码：

1. 登录成功后，将token保存至localStorage中：

localStorage.setItem('token', res.data.token);

2. 在Vue组件中，读取localStorage中的token：

const token = localStorage.getItem('token');

3. 使用axios发送请求，携带token获取用户信息：

axios.get('/api/userinfo', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
}).then(res => {
  console.log(res.data);
});

4. 后端需要验证token的合法性，并返回用户信息，前端再将用户信息显示在页面上。

如何利用vue获取登录界面的信息，并将信息存入文件中

首先，在Vue中获取登录界面的信息需要使用表单，您可以在Vue组件中使用表单来收集用户的输入。在表单中，您可以使用v-model指令将输入值绑定到Vue实例的数据属性中。

例如，您可以在Vue组件中定义一个数据属性来存储用户的用户名和密码：

data() {
  return {
    username: '',
    password: ''
  }
}

然后，在表单中使用v-model指令将输入值绑定到数据属性中：

<form>
  <label>Username:</label>
  <input type="text" v-model="username">

  <label>Password:</label>
  <input type="password" v-model="password">

  <button @click="submitForm">Submit</button>
</form>

在上面的代码中，我们定义了一个包含用户名和密码输入框的表单，并在点击提交按钮时调用submitForm方法。

接下来，您可以在submitForm方法中将用户输入的信息存入文件中。您可以使用浏览器提供的File API来实现这个功能。具体来说，您可以使用FileWriter对象将数据写入文件中。

以下是一个使用FileWriter对象将数据写入文件中的示例代码：

submitForm() {
  // 创建一个Blob对象，存储用户名和密码数据
  const data = new Blob([`${this.username},${this.password}\n`], { type: 'text/plain' });

  // 创建一个FileWriter对象，并将数据写入文件中
  const fileWriter = new FileWriter('userdata.txt');
  fileWriter.write(data);
}

上面的代码中，我们首先创建了一个Blob对象，该对象包含用户输入的用户名和密码。然后，我们创建了一个FileWriter对象，并将Blob对象写入名为“userdata.txt”的文件中。

请注意，上面的代码只是示例代码，您需要根据您的实际需求进行调整。另外，为了让上面的代码正常工作，您需要在Vue应用程序中引入FileWriter对象所在的库。例如，您可以在Vue组件的<script>标签中添加以下代码：

import FileWriter from 'file-writer';

最后，为了保证用户数据的安全性，您需要在服务器端对用户数据进行加密和验证，以防止不良用户利用您的数据造成损失。