vue登录拦截-CFANZ编程社区

在 Vue.js 项目中，登录拦截通常指的是在用户未登录的情况下，访问需要认证的页面时进行拦截，并重定向到登录页面。这通常是通过路由守卫（vue-router）来实现的。以下是一个简单的实现步骤和代码示例。

实现步骤：

安装并配置 Vue Router：如果还没有安装 Vue Router，请先安装并配置它。
配置路由守卫：使用 vue-router 的导航守卫功能，在用户访问需要认证的页面时，检查其是否登录。
存储用户登录状态：登录状态可以存储在 localStorage、sessionStorage 或 Vuex 中。
拦截未登录用户：在路由守卫中，检查用户是否登录，若未登录则跳转到登录页面。

代码示例：

1. 安装 Vue Router（如果还没有安装）

npm install vue-router

2. 配置路由和路由守卫

// router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Login from '@/views/Login.vue';
import Dashboard from '@/views/Dashboard.vue';

Vue.use(Router);

// 模拟的一个登录状态，可以从 Vuex 或 localStorage 获取
function isLoggedIn() {
  return localStorage.getItem('token') ? true : false;
}

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // 需要登录才能访问
  }
];

const router = new Router({
  routes
});

// 全局路由守卫
router.beforeEach((to, from, next) => {
  // 如果目标路由需要认证并且用户未登录，则跳转到登录页
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isLoggedIn()) {
      next({ name: 'Login' }); // 跳转到登录页
    } else {
      next(); // 允许访问
    }
  } else {
    next(); // 其他页面直接访问
  }
});

export default router;

3. 配置 Vue 实例

确保你在 Vue 实例中引用了这个路由配置。

// main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

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

4. 登录页面

在登录页面，你可以处理用户的登录逻辑，并将登录状态存储在 localStorage 中。

// views/Login.vue

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 假设验证通过后，存储 token
      if (this.username === 'admin' && this.password === '1234') {
        localStorage.setItem('token', 'dummy-token'); // 存储 token
        this.$router.push({ name: 'Dashboard' }); // 登录成功后跳转到 Dashboard
      } else {
        alert('用户名或密码错误');
      }
    }
  }
};
</script>

5. 登录后访问受限页面

在受限页面中，检查登录状态（已经在路由守卫中做了）：

// views/Dashboard.vue

<template>
  <div>
    <h2>仪表盘</h2>
    <p>欢迎来到仪表盘页面！</p>
  </div>
</template>

<script>
export default {
  created() {
    // 页面加载时可以验证是否已登录，若没有登录则跳转到登录页
    if (!localStorage.getItem('token')) {
      this.$router.push({ name: 'Login' });
    }
  }
};
</script>

6. 退出登录

退出登录时，通常会清除存储的登录状态，并跳转到登录页面。

// views/Home.vue

<template>
  <div>
    <h2>主页</h2>
    <button @click="logout">退出登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      localStorage.removeItem('token'); // 清除 token
      this.$router.push({ name: 'Login' }); // 跳转到登录页
    }
  }
};
</script>

总结

路由守卫：我们在 beforeEach 中检查用户是否登录，如果目标路由需要认证（meta.requiresAuth），且用户未登录，则重定向到登录页面。
登录状态：通过 localStorage 存储和检查用户的登录状态。你可以根据实际需求，将登录状态存储在 Vuex 或其他地方。
跳转：在登录成功时，将用户重定向到原来访问的页面或默认页面。退出登录时，清除存储的 token 并重定向到登录页。

这个方法适用于简单的 Vue 单页面应用（SPA）中的登录拦截需求。