Vue实现用户没有登陆时,访问后自动跳转登录页面

Vue 2月前 97

随着移动互联网的迅猛发展，越来越多的网站和应用程序涌现出来，而这些网站和应用程序的核心就是用户。用户登录是网站和应用程序的一个必要环节，但是很多用户并不愿意在每次访问网站或应用程序时都进行登录操作，这不仅浪费时间，也影响了用户体验。因此，实现用户没有登录时访问自动跳转登录页面是非常重要的。

Vue是一种流行的JavaScript框架，它可以用于构建大型单页应用程序。在Vue中，实现用户没有登录时访问自动跳转登录页面非常简单，本文将介绍如何实现这一功能。

创建登录页面

首先，我们需要创建一个登录页面。这个页面应该包含一个登录表单，以便用户输入用户名和密码。当用户提交表单时，我们需要向服务器发送一个HTTP请求，以验证用户的身份。如果验证成功，服务器应该返回一个包含用户信息的JSON对象。否则，服务器应该返回一个错误消息。

下面是一个简单的登录页面的代码：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: this.username,
          password: this.password
        })
      })
      const data = await response.json()
      if (data.success) {
        // 登录成功，保存用户信息到本地存储
        localStorage.setItem('user', JSON.stringify(data.user))
        // 跳转到首页
        this.$router.push('/')
      } else {
        // 登录失败，显示错误消息
        alert(data.message)
      }
    }
  }
}
</script>

创建路由

接下来，我们需要创建一个路由来处理用户访问页面的请求。在Vue中，我们可以使用Vue Router来实现路由功能。首先，我们需要在main.js文件中引入Vue Router和我们创建的登录页面组件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: Home
    }
  ]
})

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

在上面的代码中，我们定义了两个路由，一个是/login，另一个是/。如果用户访问/login路由，我们将显示登录页面。如果用户访问/路由，我们将显示主页。

检查用户是否已登录

现在，我们需要检查用户是否已登录。我们可以在Vue Router的全局导航守卫中实现这一功能。全局导航守卫是Vue Router提供的一个功能，它可以在用户访问页面之前执行某些操作。

我们需要在全局导航守卫中检查用户是否已登录。如果用户已登录，我们将放行请求，否则，我们将重定向用户到登录页面。

下面是一个示例代码：

router.beforeEach((to, from, next) => {
  const user = JSON.parse(localStorage.getItem('user'))
  if (!user && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})