路由（导航）守卫

概念

分类：

参数：

next函数是必须要调用的，否则无法跳转：

实践： 通过条件判断来控制路由的跳转

实际应用

登录页与表单 在 Vue 项目中添加登录页面并检测用户是否已经登录，通常涉及以下几个步骤：

1. 设计登录页面

你可以创建一个 Login.vue 页面，里面包含表单用于输入用户名和密码。

<!-- src/views/Login.vue -->
<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名：</label>
        <input v-model="username" id="username" type="text" placeholder="请输入用户名" required />
      </div>
      <div>
        <label for="password">密码：</label>
        <input v-model="password" id="password" type="password" placeholder="请输入密码" required />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // 假设调用一个API来验证用户
      // 假设验证成功后将用户信息存储到本地存储中
      if (this.username === 'admin' && this.password === 'password') {
        localStorage.setItem('isLoggedIn', 'true'); // 模拟登录成功
        this.$router.push('/'); // 登录成功后跳转到首页
      } else {
        alert('用户名或密码错误');
      }
    },
  },
};
</script>

2. 检测用户是否已登录

要判断用户是否已经登录，通常可以通过本地存储 (localStorage) 或 cookie 来保存登录状态。比如你在用户成功登录后将 isLoggedIn 标志设置到 localStorage 中。

你可以在应用的全局路由守卫中检测用户的登录状态，并根据登录情况跳转到相应的页面。

3. 路由守卫：检测是否登录

通过 Vue Router 的 导航守卫 来检测每次路由切换时，是否需要进行登录验证。

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Login from '@/views/Login.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { requiresAuth: true },  // 需要认证
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
    },
  ],
});

// 全局路由守卫：每次路由变化时都会触发
router.beforeEach((to, from, next) => {
  // 如果目标路由需要认证且用户未登录，重定向到登录页
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
  
  if (to.meta.requiresAuth && !isLoggedIn) {
    next({ name: 'Login' });  // 跳转到登录页
  } else {
    next();  // 允许访问
  }
});

export default router;

4. 跳转到登录页面

如果用户未登录，路由守卫会将他们重定向到登录页面。如果登录成功后，我们会通过 this.$router.push('/') 跳转到主页或上一个访问的页面。

5. 保持用户登录状态

为了在页面刷新后保持用户登录状态，你可以使用 localStorage 或 sessionStorage 来存储登录标识符（比如 isLoggedIn 或 token）。localStorage 会在页面刷新后仍然存在，而 sessionStorage 在页面关闭后会清除。

如果用户已经登录了，你可以通过 Vuex 或者直接在全局的 mounted 钩子中检查 localStorage 来设置用户登录状态。

// 在 App.vue 中，或者在一个全局组件中，来检查登录状态
created() {
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
  if (isLoggedIn) {
    // 用户已经登录，可以执行一些其他操作，比如加载用户数据
  }
}

6. 用户退出登录

当用户退出登录时，你需要清除本地存储中的登录信息，并重定向到登录页面。

<!-- 退出登录的方法 -->
methods: {
  logout() {
    localStorage.removeItem('isLoggedIn');  // 清除登录信息
    this.$router.push('/login');  // 跳转到登录页
  },
}

7. 完整的逻辑总结

• 创建 Login.vue 页面，包含表单用于用户输入。
• 使用路由守卫来检测每次路由切换时用户是否登录。
• 登录成功后，将登录状态保存到 localStorage 中。
• 如果用户未登录且尝试访问需要认证的页面，跳转到登录页面。
• 退出登录时，清除 localStorage 并重定向到登录页面。

这样，你就能实现基本的登录页面逻辑了。如果需要进一步拓展（例如集成 API 进行身份验证），可以在 login() 方法中调用后端接口验证用户信息。