登录拦截前端vue

登录拦截是指在前端应用中对用户进行登录状态的验证，如果用户未登录或登录状态失效，则会拦截用户的操作，要求用户重新登录或进行其他操作。

在Vue中，可以通过路由守卫来实现登录拦截。路由守卫是Vue Router提供的一种功能，可以在路由导航过程中进行拦截和控制。

在Vue项目中，我们需要安装和配置Vue Router。在main.js文件中，我们需要引入Vue Router并创建一个路由实例。然后，我们可以定义路由规则，将不同的URL路径与对应的组件关联起来。

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard }
]
const router = new VueRouter({
  routes
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

接下来，我们可以在路由实例上使用beforeEach方法来定义全局的前置守卫。在这个守卫函数中，我们可以进行登录状态的验证。

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

在上面的代码中，我们使用localStorage来保存用户的登录状态。在beforeEach守卫函数中，我们首先获取localStorage中的loggedIn值。如果用户访问的路径不是登录页且没有登录，我们就通过next('/login')将用户重定向到登录页；否则，我们就通过next()放行用户继续访问。

在登录页组件中，我们可以添加登录逻辑，当用户成功登录后，将loggedIn值设置为true，并将用户重定向到目标页面。

// Login.vue
<template>
  <div>
    <input type="text" v-model="username">
    <input type="password" v-model="password">
    <button @click="login">Login</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 进行登录逻辑验证，假设验证成功
      const loggedIn = true
      localStorage.setItem('loggedIn', loggedIn)
      // 重定向到目标页面
      this.$router.push('/dashboard')
    }
  }
}
</script>

在上面的代码中，我们在登录按钮的点击事件中进行登录逻辑的验证。假设验证成功，我们将loggedIn设置为true，并使用this.$router.push('/dashboard')将用户重定向到目标页面。

需要注意的是，上述示例中使用了localStorage来保存登录状态。localStorage是浏览器提供的一种本地存储机制，可以将数据保存在浏览器中。在实际应用中，我们可以根据需要选择合适的存储方式，如cookie、session等。

除了全局的前置守卫外，Vue Router还提供了其他类型的守卫，如路由独享的守卫、组件内的守卫等。这些守卫可以根据具体的需求来进行使用，实现更精细化的拦截控制。

总结一下，登录拦截是前端应用中常见的安全措施之一。通过使用Vue Router的路由守卫，我们可以在路由导航过程中对用户进行登录状态的验证，并进行相应的拦截和控制。这样可以有效地保护用户的数据安全，提升应用的用户体验。