搭建后台项目的时候，怎么封装登录模块和axios

在后台项目中封装 ​登录模块​ 和 ​axios​ 其实就像搭积木，既要保证安全（token管理），又要方便使用（自动处理登录状态）。下面用最直白的方式讲清楚怎么做：

---

​一、登录模块封装（核心逻辑）​​

1. ​写登录接口​

// src/api/auth.js
import { post } from '@/utils/request' // 用前面封装好的axios

export function login(username, password) {
  return post('/auth/login', { username, password })
}

export function logout() {
  return post('/auth/logout')
}

export function getUserInfo() {
  return get('/auth/userinfo')
}

2. ​处理登录流程（Vue示例）​​

// 在登录页面调用
import { login } from '@/api/auth'

const handleLogin = async () => {
  try {
    const res = await login('admin', '123456')
    // 1. 存token到本地（像存银行卡）
    localStorage.setItem('token', res.data.token)
    // 2. 跳转到首页
    router.push('/')
  } catch (err) {
    alert('账号或密码错了！')
  }
}

---

​二、axios 和登录状态联动​

1. ​自动携带token（像快递员随身带工牌）​​

在之前封装的 axios拦截器 里加这段：

// 请求拦截器
service.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}` // 格式根据后端定
  }
  return config
})

2. ​token过期自动跳登录（像门禁卡失效要重新登记）​​

// 响应拦截器
service.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 1. 清空旧token
      localStorage.removeItem('token')
      // 2. 跳转到登录页
      router.push('/login?redirect=' + encodeURIComponent(route.fullPath))
      // 3. 提示用户
      alert('登录过期，请重新登录！')
    }
    return Promise.reject(error)
  }
)

---

​三、全局登录状态管理（Vuex/Pinia）​​

1. ​用Vuex存用户信息（像公司前台登记表）​​

// store/modules/user.js
export default {
  state: () => ({
    token: localStorage.getItem('token') || '',
    userInfo: null
  }),
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    SET_USERINFO(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    async login({ commit }, { username, password }) {
      const res = await login(username, password)
      commit('SET_TOKEN', res.data.token)
      return res
    },
    async getUserInfo({ commit }) {
      const res = await getUserInfo()
      commit('SET_USERINFO', res.data)
      return res
    }
  }
}

2. ​在页面中使用​

// 登录组件
methods: {
  async submitForm() {
    await this.$store.dispatch('user/login', this.form)
    this.$router.push('/')
  }
}

// 导航栏显示用户信息
computed: {
  userInfo() {
    return this.$store.state.user.userInfo
  }
}

---

​四、权限控制（路由守卫）​​

1. ​检查登录状态（像进小区要刷卡）​​

// router/index.js
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.meta.requiresAuth && !hasToken) {
    next(`/login?redirect=${to.path}`) // 把想去的地址传过去
  } else {
    next()
  }
})

2. ​动态路由（根据权限显示菜单）​​

// 登录成功后获取用户权限
async afterLogin() {
  await store.dispatch('user/getUserInfo')
  const routes = generateRoutes(store.state.user.roles) // 根据角色生成路由
  router.addRoutes(routes) // 动态添加路由
}

---

​五、安全增强技巧​

1. ​token自动刷新​
   在响应拦截器里检查快过期的token，自动调用刷新接口：

   if (error.response.data.code === 50014) { // 假设这个code表示token快过期
     const newToken = await refreshToken()
     localStorage.setItem('token', newToken)
     // 重新发刚才失败的请求
     error.config.headers.Authorization = `Bearer ${newToken}`
     return service(error.config)
   }
   

2. ​退出登录清理​

   function logout() {
     localStorage.removeItem('token')
     store.commit('user/RESET_STATE')
     router.push('/login')
   }
   

---

​六、完整调用流程示例​

1. 用户输入账号密码点击登录
2. 调用 login() 接口 → 成功 → 存token
3. 跳转首页时触发路由守卫 → 检查token有效 → 放行
4. 在首页调用 getUserInfo() → axios自动带上token → 显示用户信息
5. 用户点击退出 → 清空token → 跳回登录页

---

​总结​：

• ​登录模块​：封装登录/退出/用户信息接口
• ​axios联动​：自动带token、过期处理
• ​状态管理​：Vuex/Pinia集中管用户数据
• ​权限控制​：路由守卫 + 动态路由