vue与jwt验证

àì夳堔傛蜴生んèń 2024-03-24 19:01 25阅读 0赞

## vue与jwt验证 ##

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

后端部分看这篇文章：[SpringBoot+JWT+Shiro  
][SpringBoot_JWT_Shiro]  
如何创建vue项目：[用命令窗口的方式创建Vue项目  
][Vue_]

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

### 数据库设计 ###

### 前端代码 ###

我前段所采取`vue2+element-ui`  
[element-ui组件][element-ui]

#### 项目结构 ####

![在这里插入图片描述][4834c71a8e5343d88beccd4d871479a1.png]

#### main.js ####

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/index.css';
    Vue.config.productionTip = false
    Vue.use(ElementUI);
    new Vue({
        
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

#### App.vue ####

#### index.js ####

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        
        path: '/',
        name: 'login',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/login/LoginView.vue')
      },
      {
        
        path: '/register',
        name: 'register',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/register/RegisterView.vue')
      },
      {
        
        path: '/index',
        name: 'index',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/index/IndexView.vue')
      }
    ]
    
    const router = new VueRouter({
        
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

#### store ####

##### index.js #####

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 #####

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

#### LoginView.vue ####

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

<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="Name"></el-table-column>
          
        </el-table>
      </div>
    </template>
    
    <script>
    import {
           mapActions, mapGetters } from 'vuex';
    import axios from 'axios';
    
    export default {
          
      
      data() {
          
        return {
          
          users: [],
        };
      },
      computed:{
          
        ...mapGetters('auth', ['getToken']),
        ...mapActions('auth', ['logout'])
      },
      mounted() {
          
        this.getAll();
      },
      methods: {
          
        getAll() {
          
          const token = this.getToken;
          console.log(token)
          axios.get(`http://localhost:8989/user/all/${ token}`)
            .then(response => {
          
              this.users = response.data.data.data;
            })
            .catch(error => {
          
              console.error(error);
            });
        },
        loginOut(){
          
            this.logout()
            this.$router.push("/")
        }
      },
    };
    </script>

#### Register.vue ####

<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="registerForm.confirmPassword" 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() {
          
            const 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(response => {
          
                    if (response.data.code == 200){
          
                        console.log("注册成功")
                        alert("注册成功，现在返回登录页面>_<")
                        this.$router.push("/")
                    } else {
          
                        alert(response.data.message)
                    }
                })
              } else {
          
                console.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>

[SpringBoot_JWT_Shiro]: https://blog.csdn.net/qq_51447496/article/details/132300726
[Vue_]: https://blog.csdn.net/qq_51447496/article/details/131003860?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169253847316800197023833%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=169253847316800197023833&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-14-131003860-null-null.268%5Ev1%5Ekoosearch&utm_term=vue&spm=1018.2226.3001.4450
[jwt]: https://gitee.com/geek-li-hua/code-in-blog.git
[element-ui]: https://element.eleme.cn/#/zh-CN/component/installation
[4834c71a8e5343d88beccd4d871479a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/b77cccc7132d4486b686d84975a94dad.png