vue记录显示上次登录时间代码实现

在Vue.js中，可以使用localStorage或cookie等方式来记录用户的上次登录时间。以下是一个简单的实现示例：

1. 在登录成功后，记录当前时间到localStorage中：

// 登录成功后记录上次登录时间
localStorage.setItem('lastLoginTime', new Date().toLocaleString());

2. 在需要显示上次登录时间的组件中，从localStorage中获取上次登录时间并显示：

<template>
  <div>
    上次登录时间：{{ lastLoginTime }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastLoginTime: ''
    }
  },
  mounted() {
    // 从localStorage中获取上次登录时间并显示
    this.lastLoginTime = localStorage.getItem('lastLoginTime');
  }
}
</script>

这样就可以在页面中显示上次登录时间了。如果需要在用户退出登录时清除localStorage中的上次登录时间，可以在退出登录的处理函数中添加以下代码：

// 清除上次登录时间
localStorage.removeItem('lastLoginTime');

相关问题

vue移动端单点登录代码实现

在Vue移动端应用中实现单点登录，可以使用一些流行的认证协议和库，如OAuth 2.0和Vue Router。下面是一个简单的示例代码，演示如何在Vue移动端应用中实现单点登录。

首先，你需要在Vue项目中安装`vue-router`和`axios`：

npm install vue-router axios

然后，在你的Vue项目中创建一个新的路由文件 `router.js`，并添加下面的代码：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

// 定义路由
const router = new Router({
  mode: 'history',
  routes: [
    // 其他路由
    {
      path: '/login',
      name: 'Login',
      component: () => import('./views/Login.vue')
    },
    // 其他路由
  ]
});

// 添加路由导航守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('accessToken');
  
  if (to.path !== '/login' && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

export default router;

这段代码中，我们创建了一个Vue Router实例，并定义了一些路由。其中，`/login` 是登录页面的路由路径。我们还添加了一个路由导航守卫，在每次路由跳转之前检查用户是否已经登录（通过检查本地存储中是否存在访问令牌 `accessToken`）。如果用户未登录且不是访问登录页面，则自动跳转到登录页面。

接下来，创建一个登录组件 `Login.vue`，并添加下面的代码：

<template>
  <div>
    <h1>Login Page</h1>
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      // 调用认证服务器的登录接口获取访问令牌
      // 例如使用axios发送请求
      axios.post('https://auth-server.com/login', {
        username: 'your-username',
        password: 'your-password'
      })
      .then(response => {
        const accessToken = response.data.accessToken;
        
        // 将访问令牌保存到本地存储
        localStorage.setItem('accessToken', accessToken);
        
        // 跳转到首页或其他需要登录才能访问的页面
        this.$router.push('/');
      })
      .catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

在这个示例中，我们通过点击登录按钮来触发登录流程。你需要根据你的认证服务器的实际情况，使用`axios`或其他HTTP库发送登录请求，并将返回的访问令牌保存到本地存储中。最后，使用`this.$router.push('/')`跳转到首页或其他需要登录才能访问的页面。

请注意，这只是一个简单的示例，实际应用中可能还需要处理认证服务器返回的令牌验证和刷新等逻辑。

希望这个示例能帮助你在Vue移动端应用中实现单点登录！

vue3和cli实现登录 代码示例

好的，让我想一想...

以下是一个使用 Vue 3 和 Vue CLI 实现登录的代码示例：

1. 在命令行中使用 Vue CLI 创建一个新项目：

vue create my-login-app

2. 安装所需的依赖项：

cd my-login-app
npm install axios vue-router

3. 在 src/main.js 文件中引入必要的依赖项：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueRouter from 'vue-router'

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.prototype.$axios = axios

const routes = [
  { path: '/', component: App }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4. 在 App.vue 文件中实现登录逻辑：

<template>
  <div>
    <h1>登录页</h1>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名:</label>
        <input id="username" v-model="username" type="text">
      </div>
      <div>
        <label for="password">密码:</label>
        <input id="password" v-model="password" type="password">
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: '',
    }
  },
  methods: {
    async login() {
      const response = await this.$axios.post('/api/login', {
        username: this.username,
        password: this.password,
      })

      if (response.status === 200) {
        this.$router.push('/dashboard')
      } else {
        this.errorMessage = '用户名或密码错误'
      }
    }
  },
}
</script>

在实际使用时，你需要将上面的代码改成符合你的后端 API 接口。不要忘记在 package.json 文件中配置一下代理，以便在开发模式下使用真实的 API 接口。

{
  ...,
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://localhost:3000",
        "changeOrigin": true
      }
    }
  }
}

这就是一个使用 Vue 3 和 Vue CLI 实现登录的简单示例。如果你还有什么问题，我会尽力回答的。