【项目实战】一、Spring boot整合JWT、Vue案例展示用户鉴权(下)

简介: 【项目实战】一、Spring boot整合JWT、Vue案例展示用户鉴权(下)

5.5、vue项目引入router

5.5.1、安装路由

cnpm install vue-router@4

5.5.2、在components文件夹下创建登录页面Login.vue

<template>
  <div class="login">
    <el-card class="box-card">
      <el-form label-width="80px" :model="form" ref="form" >
        <el-form-item  label="用户名" prop="userId">
          <el-input v-model="form.userId" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPassword">
          <el-input type="password" v-model="form.userPassword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="lo" type="primary" @click="login()" >登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button  @click="select()" >查询</el-button>
      <br>
      <el-text>{{ message }}</el-text>
    </el-card>
  </div>
</template>
<script>
import service from '../service.js'
export default {
  data(){
    return {
      form:{
        userId:'',
        userPassword:''
      },
      message:''
    }
  },
  methods:{
    login(){
      service({
        method: 'post',
        url: '/auth/login',
        data: this.form
      }).then(res => {
        console.log(res.data.data.token)
        this.$message({message:"登录成功!",type:"success"})
        window.localStorage.setItem("token",res.data.data.token)
      })
    },
    select(){
      service({
        method: 'post',
        url: '/auth/getUserMessageByToken',
        headers: {
          "Content-Type":"application/json",
          "token":window.localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data.data)
        this.message = res.data.data
      })
    }
  }
};
</script>

5.5.3、在sec文件夹下创建router文件夹

5.5.3.1、创建router.js

const routes = [
    {
        path:'/',
        redirect:'/login',
        name: '登录页',
        hidden:true,
        component:()=>import('@/components/Login') //路由懒加载
    },
    {
        path:'/login',
        name: '登录页',
        hidden:true,
        component:()=>import('@/components/Login') //路由懒加载
    }
]
export default routes;

5.5.3.2、创建index.js

import { createRouter, createWebHistory } from "vue-router"
import routes from "./routes"
var router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

5.6、在main.js文件中配置路由

5.7、在App.vue中配置起始页面及路由入口

<template>
  <Login/>
  <router-view></router-view>
</template>
<script>
import Login from './components/Login.vue'
export default {
  name: 'App',
  components: {
    Login
  }
}
</script>

5.8、vue项目引入axios

5.8.1、安装axios

npm install axios --save

5.8.2、在src文件夹下创建service.js文件

//axiosInstance.js
//导入axios
import axios from 'axios'
//使用axios下面的create([config])方法创建axios实例,其中config参数为axios最基本的配置信息。
const service = axios.create({
    baseURL:'http://localhost', //请求后端数据的基本地址,自定义
    timeout: 2000                   //请求超时设置,单位ms
})
//导出我们建立的axios实例模块,ES6 export用法
export default service

5.8.3、登录页面引入service

5.8.4、service的使用

method:请求方式

url:请求地址

data:携带参数 // 注:若后端使用RequestBody对象接收参数,则用表单传递,若用String接收参数,需要用JSON.stringify(this.form)转为String类型的JSON格式

res:返回的内容

this.$message({message:“登录成功!”,type:“success”}):返回提示信息到前端页面,type有多种类型:success、error、wraning等

window.localStorage.setItem(“token”,res.data.data.token):将返回的token值存入本地存储当中

5.9、启动vue项目

npm run serve

6、测试

6.1、输入用户名和密码点击登录

6.2、点击查询

7、结束

此项目以SpringCloud为基础,首先创建空的父类SpringCloud空工程,规范Spring boot、Spring Cloud、Spring Cloud Alibaba版本;集成前端Vue3、router、axios,使用JWT、Nacos微服务、openFeign、Gateway及GlobalFilter等根据,在网关层完成用户鉴权。

目录
相关文章
|
24天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
59 10
|
24天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
43 8
|
24天前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
54 8
|
24天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生就业服务平台设计与实现(系统源码+文档+数据库+部署等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
63 6
|
24天前
|
JavaScript Java 测试技术
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现(系统源码+文档+部署讲解等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
55 6
|
24天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue的班级综合测评管理系统设计与实现(系统源码+文档+数据库+部署等)
✌免费选题、功能需求设计、任务书、开题报告、中期检查、程序功能实现、论文辅导、论文降重、答辩PPT辅导、会议视频一对一讲解代码等✌
40 4
|
24天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的高校食堂移动预约点餐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
66 3
|
24天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生体质测试管理系统设计与实现(系统源码+文档+数据库+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
36 2
|
1月前
|
XML JavaScript Java
SpringBoot集成Shiro权限+Jwt认证
本文主要描述如何快速基于SpringBoot 2.5.X版本集成Shiro+JWT框架,让大家快速实现无状态登陆和接口权限认证主体框架,具体业务细节未实现,大家按照实际项目补充。
80 11
|
1月前
|
缓存 安全 Java
Spring Boot 3 集成 Spring Security + JWT
本文详细介绍了如何使用Spring Boot 3和Spring Security集成JWT,实现前后端分离的安全认证概述了从入门到引入数据库,再到使用JWT的完整流程。列举了项目中用到的关键依赖,如MyBatis-Plus、Hutool等。简要提及了系统配置表、部门表、字典表等表结构。使用Hutool-jwt工具类进行JWT校验。配置忽略路径、禁用CSRF、添加JWT校验过滤器等。实现登录接口,返回token等信息。
346 12