当前位置：首页 > VUE

vue无路由实现登录

2026-01-20 06:19:55VUE

实现无路由登录的基本思路

在Vue中实现无路由登录的核心在于利用组件动态渲染和状态管理。通过条件渲染控制登录表单与主界面的切换，结合全局状态（如Vuex或Pinia）保存用户认证信息。

创建登录组件与主界面组件

设计两个独立组件：Login.vue用于登录表单，App.vue作为主界面容器。通过v-if或动态组件实现切换：

<!-- App.vue -->
<template>
  <div id="app">
    <Login v-if="!isAuthenticated" @login-success="handleLoginSuccess"/>
    <MainContent v-else/>
  </div>
</template>

<script>
import Login from './Login.vue'
import MainContent from './MainContent.vue'

export default {
  components: { Login, MainContent },
  data() {
    return {
      isAuthenticated: false
    }
  },
  methods: {
    handleLoginSuccess() {
      this.isAuthenticated = true
    }
  }
}
</script>

状态持久化方案

为避免刷新页面丢失登录状态，需结合浏览器本地存储：

// 登录成功后存储token
localStorage.setItem('authToken', 'your_jwt_token')

// 初始化时检查
created() {
  this.isAuthenticated = !!localStorage.getItem('authToken')
}

实现登录逻辑

在登录组件中处理表单提交和认证验证：

<!-- Login.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" type="text">
    <input v-model="password" type="password">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const res = await fakeAuthAPI(this.username, this.password)
        localStorage.setItem('authToken', res.token)
        this.$emit('login-success')
      } catch (error) {
        alert('登录失败')
      }
    }
  }
}
</script>

认证拦截与API保护

为保护需要认证的API请求，可在axios拦截器中添加token：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})