VUE—admin登录页面，利用localstorage获取登录名

在Vue的admin登录页面中，可以利用localstorage来获取登录名。

首先，在登录成功后，可以将用户名存储到localstorage中，如下所示：

// 登录成功后，将用户名存储到localstorage中
localStorage.setItem('username', username);

然后，在页面加载时，可以从localstorage中获取用户名，如下所示：

// 页面加载时，从localstorage中获取用户名
mounted() {
  const username = localStorage.getItem('username');
  if (username) {
    this.username = username;
  }
}

这样，当用户登录成功后，下次再访问该页面时，就可以自动填充上次登录的用户名，方便用户使用。

相关问题

vue admin 登录注册页面

Vue Admin的登录注册页面通常是一个单独的模块，可以在Vue项目中添加一个名为"login"或"register"的组件来实现。以下是一个简单的示例：

首先，在你的Vue项目中创建一个名为"Login.vue"或"Register.vue"的组件文件。在这个文件中，你可以定义登录或注册所需要的表单字段和验证规则。

例如，在Login.vue文件中，你可以编写如下代码：

<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit="login">
      <input type="text" v-model="username" placeholder="用户名" required>
      <input type="password" v-model="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login(event) {
      event.preventDefault();
      
      // 在这里执行登录操作，比如发送登录请求到服务器
      
      // 登录成功后，可以跳转到其他页面或显示相关提示
    }
  }
};
</script>

<style scoped>
.login-container {
  /* 样式定义 */
}
</style>

这是一个简单的登录页面示例，其中包含一个登录表单。当用户点击登录按钮时，会触发`login`方法。你可以在该方法中执行登录操作，比如发送登录请求到后端API。

类似地，你可以创建一个Register.vue文件来实现注册页面，并在其中定义相应的表单字段和验证规则。

将这些组件添加到你的Vue项目中，并根据需要进行样式和逻辑的定制，即可实现Vue Admin的登录注册页面。

vue怎么获取到登录名

在Vue中获取登录名的方法取决于您的应用程序实现了什么样的登录机制。如果您使用的是JWT（JSON Web Token），则在用户登录成功后，服务器将向客户端发送JWT令牌。客户端需要将该令牌存储在本地，例如使用浏览器的`localStorage`。在每个请求中，客户端将令牌作为Bearer令牌的 HTTP 头部发送到服务器。

在Vue中，您可以使用`localStorage`来检索JWT令牌，并使用JWT库（例如`jsonwebtoken`）解码令牌以获取有关用户的信息，例如登录名。以下是一个示例代码：

import jwt from 'jsonwebtoken'

const token = localStorage.getItem('token')
if (token) {
  const user = jwt.decode(token)
  console.log(user.username)
}

上述代码中，我们首先检查`localStorage`是否包含名为`token`的项，如果存在，则使用JWT库解码令牌并从中提取用户信息，例如登录名。