基于vue的token认证机制（完整版）

最新推荐文章于 2025-06-19 11:52:06 发布

原创

最新推荐文章于 2025-06-19 11:52:06 发布 · 置顶 · 1.8w 阅读

117 ·

CC 4.0 BY-SA版权

文章标签：

#vuejs #vue token #前端

本文介绍了如何在Vue.js应用中实现基于Token的认证机制。通过五个步骤，包括登录界面代码、路由配置、存储Token、判断请求是否需要携带Token等关键环节，详细阐述了整个流程。使用了axios和vuex进行数据交互，并采用Element-UI进行界面布局，但具体UI库可根据实际需求更换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天边学习vue边写了一个基于vue的token认证机制，以前是用的Angular js，现在改成vue，感觉写起来更容易理解，编码也更方便了。不多说，以下为截图加代码：（注意要自己去安装axios、vuex），我用的element-UI做的排版，这个可以根据实际需求自己去选择，也可以使用Bootstrap或者layyer-ui什么的。

五步即可完成，注意黑体字为主要内容！

1.目录结构

2. login.vue登录界面代码：

<template>
  <div id="login" align="center">
    <el-row :gutter="20">
      <el-col :span="7" :offset="8">
        <div class="grid-content bg-purple">
          <h1 align="center">VUE登录界面</h1><br>
        </div>
      </el-col>
      <el-col :span="6" :offset="8">
        <div class="grid-content bg-purple">

          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="账号" prop="account">
              <el-input type="text" v-model="ruleForm2.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
              <el-button @click="resetForm('ruleForm2')">重置</el-button>
              <el-button type="