vue与jwt验证

vue与jwt验证

vue与jwt验证

简介：本文讲解，如何使用vue，对jwt进行验证。

后端部分看这篇文章：SpringBoot+JWT+Shiro

如何创建vue项目：用命令窗口的方式创建Vue项目

这篇文章的代码可以在这里下载：jwt项目演示

数据库设计

前端代码

我前段所采取vue2+element-ui

element-ui组件

项目结构

main.js

代码语言：javascript代码运行次数：0运行复制

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/';
productionTip = false
Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue

代码语言：javascript代码运行次数：0运行复制

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">

</style>

index.js

代码语言：javascript代码运行次数：0运行复制

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

ct routes = [
  {
    path: '/',
    name: 'login',
    // route level code-splitting
    // this generates a separate c (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackCame: "about" */ '../views/login/LoginView.vue')
  },
  {
    path: '/register',
    name: 'register',
    // route level code-splitting
    // this generates a separate c (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackCame: "about" */ '../views/register/RegisterView.vue')
  },
  {
    path: '/index',
    name: 'index',
    // route level code-splitting
    // this generates a separate c (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackCame: "about" */ '../views/index/IndexView.vue')
  }
]

ct router = new VueRouter({
  mode: 'history',
  base: BASE_URL,
  routes
})

export default router

store

index.js

代码语言：javascript代码运行次数：0运行复制

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './auth'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth: {
      namespaced: true, // 添加命名空间
      ...auth
    }
  }
})

auth.js

代码语言：javascript代码运行次数：0运行复制

// auth.js
import axios from 'axios';
import router from '@/router';

ct auth = {
  state: {
    token: null
  },
  mutati: {
    SET_TOKE(state, token) {
       = token;
    },
    CLEAR_TOKE(state) {
       = null;
    }
  },
  acti: {
    login({ commit }, loginForm) {
      return new Promise((resolve, reject) => {
        // 调用登录接口，传递登录表单数据
        axios.post('http://localhost:8989/user/login', loginForm)
          .then(respe => {
            ct token = respe.data.;
            // 将token保存到Vuex中
            commit('SET_TOKE', token);
            // 将token保存到浏览器的localStorage中，以便在刷新页面后仍然可以保持登录状态
            localStorage.setItem('token', token);
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    logout({ commit }) {
      // 清除token并重定向到登录页面
      commit('CLEAR_TOKE');
      localStorage.removeItem('token');
      router.push('/');
    },
    checkToken({ commit }) {
      ct token = localStorage.getItem('token');
      if (token) {
        // 将token保存到Vuex中
        commit('SET_TOKE', token);
      } else {
        // 如果没有token，则重定向到登录页面
        router.push('/');
      }
    },        
  },
  getters: {
    getToken(state){
        cole.log("我被调用了")        
        return ;
    }
  }
};

export default auth;

LoginView.vue

代码语言：javascript代码运行次数：0运行复制

<template>
  <div class="login-container" style="display: flex; justify-content: center; align-items: center;">
    <el-card class="login-card">
      <h2 class="login-title">登录</h2>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="padding-left: 10%;">
            <el-button type="primary" @click="Login">登录</el-button>
            <span style="padding-left: 10%;">
              <el-link type="primary" @click="Register">注册</el-link>
            </span>
          </div>          
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {mapActi } from 'vuex';

export default {
  data() {
    return {
      loginForm: {
        username: 'lihua2',
        password: '12456'
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    ...mapActi('auth', ['login']),
    Login() {
      // 验证表单
      this.$refs.loginForm.validate(valid => {
        cole.log("表单验证成功")
        if (valid) {
          // 调用 auth 模块中的 login action
          this.login(this.loginForm)
            .then(() => {
              // 重定向到首页或其他页面
              this.$router.push('/index');
            })
            .catch(error => {
              cole.log('登录失败:', error);
            });
        } else {
          cole.log('表单验证失败');
        }
      });
    },
    Register() {
      this.$router.push('/register');
    }
  }
};
</script>

  
  <style scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .login-card {
    width: 400px;
    padding: 20px;
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .login-form {
    margin-top: 20px;
  }
  </style>

IndexView.html

代码语言：javascript代码运行次数：0运行复制

<template>
  <div>
    <el-button type="primary" @click="loginOut">退出</el-button>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="username" label="ame"></el-table-column>
      <!-- 其他列... -->
    </el-table>
  </div>
</template>

<script>
import { mapActi, mapGetters } from 'vuex';
import axios from 'axios';

export default {
  
  data() {
    return {
      users: [],
    };
  },
  computed:{
    ...mapGetters('auth', ['getToken']),
    ...mapActi('auth', ['logout'])
  },
  mounted() {
    this.getAll();
  },
  methods: {
    getAll() {
      ct token = this.getToken;
      cole.log(token)
      axios.get(`http://localhost:8989/user/all/${token}`)
        .then(respe => {
          this.users = respe.data.data.data;
        })
        .catch(error => {
          (error);
        });
    },
    loginOut(){
        this.logout()
        this.$router.push("/")
    }
  },
};
</script>

Register.vue

代码语言：javascript代码运行次数：0运行复制

<template>
    <div class="register-container" style="display: flex; justify-content: center; align-items: center;">
      <el-card class="register-card">
        <h2 class="register-title">注册</h2>
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px" class="register-form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="" placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="padding-left: 10%;">
              <el-button type="primary" @click="Register">注册</el-button>
              <span style="padding-left: 10%;">
                <el-link type="primary" @click="Login">登录</el-link>
              </span>
            </div>          
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        registerForm: {
          username: '',
          password: '',
          confirmPassword: ''
        },
        registerRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { validator: this.validateConfirmPassword, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      Register() {
        ct formData =        
        {
            username: this.registerForm.username,
            password: this.registerForm.password
        }
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            axios.post("http://localhost:8989/user/register", formData)
            .then(respe => {
                if (respe. == 200){
                    cole.log("注册成功")
                    alert("注册成功，现在返回登录页面>_<")
                    this.$router.push("/")
                } else {
                    alert(respe.)
                }
            })
          } else {
            cole.log('Invalid registration form');
          }
        });
      },
      validateConfirmPassword(rule, value, callback) {
        if (value !== this.registerForm.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      Login() {
        this.$router.push("/")
      }
    }
  };
  </script>
  
  <style scoped>
  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .register-card {
    width: 400px;
    padding: 20px;
  }
  
  .register-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .register-form {
    margin-top: 20px;
  }
  </style>

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：202-08-27，如有侵权请联系 cloudcommunity@tencent 删除前往查看token登录重定向eljwt