如何基于Axios实现VueJs项目的多类型用户登录功能

我正在开发一个基于Vue.js的Web应用，支持普通用户、管理员等多类型用户登录，目前用Axios处理HTTP请求，但不清楚如何实现多类型用户的登录逻辑。现有submitForm代码如下：

async submitForm() {
 const formData = {
 email: this.email,
 password: this.password
 }

  axios.defaults.headers.common["Authorization"] = "";
  localStorage.removeItem("token");

  await axios
      .post('http://127.0.0.1:8000/login', formData)
      .then(response => {
         console.log('response :', response.data)
 
  const token = response.data.auth_token 

  this.$store.commit('setToken', token);

  axios.defaults.headers.common["Authorization"] = "Token " + token;
  localStorage.setItem('token', token);

  const toPath = this.$route.query.to || '/admin';
  this.$router.push(toPath);
})
.catch(error => {
  if (error.response) {
    for(const property in error.response.data) {
      this.errors.push(`${property}: ${error.response.data[property]}`);
    }
  } else {
    this.errors.push('Something went wrong. Please try again');
    console.log(JSON.stringify(error.response.data));
  }
  console.log(this.errors);
})
},

核心实现方案 #

多类型用户登录的核心是后端返回用户角色标识，前端基于角色完成跳转、状态存储及权限校验，以下是具体落地步骤：

1. 后端接口配合返回角色信息 #

要求登录接口返回的数据中包含用户角色字段（比如role，值可为admin/user等），示例返回格式：

{
  "auth_token": "xxx...",
  "user": {
    "id": 1,
    "email": "admin@example.com",
    "role": "admin"
  }
}

2. 前端修改登录逻辑 #

2.1 完善登录提交代码

在登录成功后，提取并存储用户角色，同时根据角色跳转对应页面：

async submitForm() {
  this.errors = []; // 清空历史错误
  const formData = {
    email: this.email,
    password: this.password
  };

  // 重置登录前状态
  axios.defaults.headers.common["Authorization"] = "";
  localStorage.removeItem("token");
  localStorage.removeItem("userRole");

  try {
    const response = await axios.post('http://127.0.0.1:8000/login', formData);
    console.log('response :', response.data);

    const token = response.data.auth_token;
    const userRole = response.data.user.role; // 获取后端返回的角色

    // 存入Vuex状态管理
    this.$store.commit('setToken', token);
    this.$store.commit('setUserRole', userRole);

    // 存入本地存储，防止页面刷新丢失状态
    localStorage.setItem('token', token);
    localStorage.setItem('userRole', userRole);

    // 设置全局请求头
    axios.defaults.headers.common["Authorization"] = `Token ${token}`;

    // 优先使用跳转回原页面，否则根据角色跳转对应首页
    const toPath = this.$route.query.to || (userRole === 'admin' ? '/admin' : '/user-dashboard');
    this.$router.push(toPath);
  } catch (error) {
    if (error.response) {
      for (const property in error.response.data) {
        this.errors.push(`${property}: ${error.response.data[property]}`);
      }
    } else {
      this.errors.push('请求失败，请稍后重试');
      console.error(error);
    }
    console.log(this.errors);
  }
}

2.2 Vuex中新增角色状态管理

在Vuex的store中添加角色相关的state和mutation：

// store/index.js
export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    userRole: localStorage.getItem('userRole') || ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    setUserRole(state, role) {
      state.userRole = role;
    },
    // 退出登录时清空所有状态
    logout(state) {
      state.token = '';
      state.userRole = '';
      localStorage.removeItem('token');
      localStorage.removeItem('userRole');
      axios.defaults.headers.common["Authorization"] = "";
    }
  }
});

3. 路由权限控制（可选但推荐） #

通过路由守卫防止用户通过URL直接访问非授权页面：

// router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  const userRole = localStorage.getItem('userRole');

  // 未登录用户仅允许访问登录页
  if (!token && to.path !== '/login') {
    next('/login');
    return;
  }

  // 已登录用户访问登录页，自动跳转对应首页
  if (token && to.path === '/login') {
    next(userRole === 'admin' ? '/admin' : '/user-dashboard');
    return;
  }

  // 校验角色权限：比如/admin页面仅允许admin角色访问
  if (to.meta.requireAdmin && userRole !== 'admin') {
    next('/user-dashboard'); // 跳转至普通用户页面或提示无权限
    return;
  }

  next();
});

// 路由配置示例
const routes = [
  { path: '/login', component: Login },
  { 
    path: '/admin', 
    component: AdminDashboard,
    meta: { requireAdmin: true } // 标记需要admin权限
  },
  { path: '/user-dashboard', component: UserDashboard }
];

4. 关键注意事项 #

• 前端角色校验仅为体验优化：后端必须对所有接口做角色权限校验，防止恶意请求。
• 角色标识统一使用枚举值：比如admin/user/editor，避免模糊或多变的标识。
• 退出登录时需清空所有相关存储：包括token、角色信息，同时重置请求头。

内容的提问来源于stack exchange，提问作者Miloud Mokkedem