vue 实现登录退出

实现登录功能

使用 Vue 和 Vuex 管理登录状态，结合路由守卫控制访问权限。

1. 创建登录表单组件
   在 Login.vue 中设置用户名和密码输入框，绑定到 data 属性：

   
   <template>
   <form @submit.prevent="handleLogin">
    <input v-model="username" type="text" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button type="submit">登录</button>
   </form>
   </template>

export default { data() { return { username: '', password: '' } } } ```

1. 添加登录方法
   调用 API 并提交凭证到后端：

   methods: {
   async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      this.$store.commit('SET_TOKEN', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('登录失败')
    }
   }
   }

实现状态管理

在 Vuex store 中管理用户认证状态：

1. 创建 auth 模块
   在 store/modules/auth.js 中定义状态和 mutations：

   
   const state = {
   token: localStorage.getItem('token') || '',
   user: null
   }

const mutations = { SET_TOKEN(state, token) { state.token = token localStorage.setItem('token', token) }, CLEAR_AUTH(state) { state.token = '' state.user = null localStorage.removeItem('token') } }

export default { namespaced: true, state, mutations }

### 实现路由守卫

在路由配置中添加全局前置守卫：

1. 配置路由守卫  
在 `router/index.js` 中检查认证状态：
```javascript
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.auth.token
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else if ((to.path === '/login' || to.path === '/register') && isAuthenticated) {
    next('/dashboard')
  } else {
    next()
  }
})

实现退出功能

创建退出方法清除认证信息：

1. 添加退出按钮
   在导航组件中添加退出按钮：

   <button @click="handleLogout">退出登录</button>

2. 实现退出方法
   调用 Vuex mutation 清除状态：

   methods: {
   handleLogout() {
    this.$store.commit('auth/CLEAR_AUTH')
    this.$router.push('/login')
   }
   }

补充说明

1. 持久化 token
   通过 localStorage 实现 token 持久化，避免页面刷新后需要重新登录。

2. 请求拦截器
   在 axios 请求拦截器中自动添加认证头：

   axios.interceptors.request.use(config => {
   const token = store.state.auth.token
   if (token) {
    config.headers.Authorization = `Bearer ${token}`
   }
   return config
   })

3. 响应拦截器
   处理 token 过期情况：

   

   axios.interceptors.response.use(
   response => response,
   error => {
    if (error.response.status === 401) {
      store.commit('auth/CLEAR_AUTH')
      router.push('/login')
    }
    return Promise.reject(error)
   }
   )