vue +springboot + jwt 单点登录 实例

美食家大橙子  论坛元老 | 2024-12-10 13:51:32 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1871|帖子 1871|积分 5613


  • springboot 代码

    首先在entity 新建实体，新建代码
  1. package com.example.demo.demos.web.demo.entity;
  3. import lombok.Data;
  5. @Data
  6. public class User {
  7.     private String username;
  8.     private String password;
  9.     private String token;
  10. }
复制代码

  • controller 中写

  1.     //定义两个初始常量登录名 这里不使用数据库认证
  2.     private final String USERNAME = "admin";
  3.     private final String PASSWORD = "admin";
  4.     @GetMapping("/login")
  6.     public User login(  User loginForm){
  7.         if(USERNAME.equals(loginForm.getUsername()) && PASSWORD.equals(loginForm.getPassword())){
  9.             //添加token
  10.             loginForm.setToken(JwtUtiles.createToken());
  11.             return loginForm;
  12.         }
  13.         return null;
  14.     }
复制代码
添加相关依赖
  2.         <dependency>
  3.             <groupId>io.jsonwebtoken</groupId>
  4.             <artifactId>jjwt</artifactId>
  5.             <version>0.9.1</version>
  6.         </dependency>
  7.         <!---  注意以下是  java1.8以上需要添加--->
  9.         <dependency>
  10.             <groupId>javax.xml.bind</groupId>
  11.             <artifactId>jaxb-api</artifactId>
  12.             <version>2.3.0</version>
  13.         </dependency>
  16.         <dependency>
  17.             <groupId>com.sun.xml.bind</groupId>
  18.             <artifactId>jaxb-core</artifactId>
  19.             <version>2.3.0</version>
  20.         </dependency>
  23.         <dependency>
  24.             <groupId>com.sun.xml.bind</groupId>
  25.             <artifactId>jaxb-impl</artifactId>
  26.             <version>2.3.0</version>
  27.         </dependency>
  30.         <dependency>
  31.             <groupId>javax.activation</groupId>
  32.             <artifactId>activation</artifactId>
  33.             <version>1.1.1</version>
  34.         </dependency>
复制代码
utils 中新建 文件JwtUtiles

  1. package com.example.demo.demos.web.demo.utils;
  3. import io.jsonwebtoken.JwtBuilder;
  4. import io.jsonwebtoken.Jwts;
  5. import io.jsonwebtoken.SignatureAlgorithm;
  7. import java.util.Date;
  8. import java.util.UUID;
  10. public class JwtUtiles {
  12.     private static  long time = 1000* 60 *60 *24;//token有效时间
  13.     private static String signature = "admin";
  14.     public static String createToken(){
  15.         JwtBuilder jwtBuilder  = Jwts.builder();
  16.         String jwtToken = jwtBuilder
  17.                 .setHeaderParam("typ","JWT")
  18.                 .setHeaderParam("alg","HS256")
  19.                 .claim("username","admin")
  20.                 .claim("role","admin")
  21.                 .setSubject("admin-test")
  22.                 .setExpiration(new Date(System.currentTimeMillis()+time))
  23.                 .setId(UUID.randomUUID().toString())
  24.                 .signWith(SignatureAlgorithm.HS256,signature)
  25.                 .compact();
  26.         return jwtToken;
  27.     }
  28. }
复制代码
前端vue 写法：
request.js 设置

  2. import axios from 'axios'
  4. const request = axios.create({
  5.         baseURL: 'http://localhost:8080',
  6.     timeout: 50000
  7. })
  9. // request 拦截器
  10. // 可以自请求发送前对请求做一些处理
  11. // 比如统一加token，对请求参数统一加密
  12. request.interceptors.request.use(config => {
  13.     config.headers['Content-Type'] = 'application/json;charset=utf-8';
  14.     let user=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}//获取登录时存放的user对象信息
  15.     config.headers['token'] = user.token;  // 设置请求头
  16.     return config
  17. }, error => {
  18.     return Promise.reject(error)
  19. });
  21. // response 拦截器
  22. // 可以在接口响应后统一处理结果
  23. request.interceptors.response.use(
  24.     response => {
  25.         let res = response.data;
  26.         // 如果是返回的文件
  27.         if (response.config.responseType === 'blob') {
  28.             return res
  29.         }
  30.         // 兼容服务端返回的字符串数据
  31.         if (typeof res === 'string') {
  32.             res = res ? JSON.parse(res) : res
  33.         }
  34.         return res;
  35.     },
  36.     error => {
  37.         console.log('err' + error) // for debug
  38.         return Promise.reject(error)
  39.     }
  40. )
  42. export default request
复制代码
login.vue 界面
  1. <template>
  2.     <div class="login_container">
  3.        <div class="login_box">
  4.          <div style="margin:20px 0; text-align:center; font-size:24px" ><b>登录</b></div>
  5.          <!-- 用户名-->
  6.          <el-form ref="LoginFormRef" :model="loginForm" :rules="LoginFormRules" >
  7.            <el-form-item prop="username">
  8.              <el-input size="medium" style="margin:10px 0px;width: 300px;margin-left:25px" v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
  9.            </el-form-item>
  10.          <!-- 密码-->
  11.             <el-form-item prop="password">
  12.               <el-input size="medium" style="margin:10px 0px;width: 300px;margin-left:25px" show-password v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
  13.            </el-form-item>
  14.            <div style="margin:10px 0; text-align:center">
  15.              <el-button type="primary" size="small" @click="login" >登录</el-button>
  16.            <!--   <el-button type="warning" size="small" @click="resetLoginForm">重置</el-button> -->
  17.            </div>
  18.          </el-form>
  19.        </div>
  20.      </div>
  21.    </template>
  22.    
  23.    <script>
  24.      export default {
  25.        name:"Login",
  26.        data() {
  27.          return {
  28.            loginForm: {
  29.              username:'',
  30.              password:''
  31.            },
  32.            LoginFormRules:{
  33.              username:[
  34.                { required: true, message: '请输入用户名', trigger: 'blur' },
  35.              ],
  36.              password:[
  37.                { required: true, message: '请输入密码', trigger: 'blur' },
  38.              ]
  39.            }
  40.          }
  41.        },   
  43.        methods:{
  44.         login(){
  45.             this.$refs['LoginFormRef'].validate(async (valid) => {
  46.                 if (valid) {
  47.                   let _this = this;
  48.                     this.request.get("http://localhost:8080/user/login",{params:this.loginForm}).then(res=>{
  49.                       console.log(this.loginForm)
  50.                     console.log(res)
  51. /*                             if(res.code=='200'){
  52.                                 localStorage.setItem("user",JSON.stringify(res.data));//存储用户信息到浏览器
  53.                                 this.$router.push("/home");
  54.                                 this.$message.success("登录成功");
  55.                             }else{
  56.                                 this.$message.error(res.msg);
  57.                             } */
  58.                     })
  59.                 }  
  60.             })
  61.        },
  63.      }
  64.    
  65.     }
  66.    </script>
  67.    
  68.    <style scoped>
  69.      .login_container{
  70.        background-color: #2b4b6b;
  71.        height: 100%;
  72.      }
  73.    
  74.      .login_box{
  75.        width: 350px;
  76.        height: 300px;
  77.        background-color: #fff;
  78.        border-radius: 3px;
  79.        position: absolute;
  80.        left: 50%;
  81.        top: 50%;
  82.        transform: translate(-50%,-50%)
  83.      }
  84.    </style>
复制代码

登录后可观察到token已经返回

添加路由保卫

  2. import Vue from 'vue'
  3. import VueRouter from 'vue-router'
  4. import Manage from '../views/Manage.vue'
  5. import Aside from '@/components/Aside.vue'
  6. import User from '@/views/user.vue'
  7. import Login  from '../views/Login.vue'
  8. import axios from 'axios'
  9. Vue.use(VueRouter)
  10. const routes = [
  11.   {
  12.     path: '/',
  13.     name: 'Manage',
  14.     redirect: '/login',
  15.     component: Manage,
  16.     children:[
  17.       {
  18.         path: 'user',
  19.         name: 'User',
  20.         component: User
  21.       },
  22.       {
  23.         path: 'home',
  24.         name: 'Home',
  25.         // route level code-splitting
  26.         // this generates a separate chunk (about.[hash].js) for this route
  27.         // which is lazy-loaded when the route is visited.
  28.         component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
  29.       }
  30.     ]
  31.   },
  32.   {
  33.     path: '/login',
  34.     name: 'Login',
  35.     component: Login
  36.   },
  37.   {
  38.     path: '/error',
  39.     name: 'Error',
  40.     component: Login
  41.   }
  42. ]
  46. const router = new VueRouter({
  47.   mode: 'history',
  48.   base: process.env.BASE_URL,
  49.   routes
  50. })
  52. //全局路由守卫
  53. router.beforeEach((to,from,next)=>{
  54.   if(to.path.startsWith('/login')){
  55.     window.localStorage.removeItem('access-admin')
  56.     next()
  57.   }else{
  58.     let admin = JSON.parse(window.localStorage.getItem('access-admin'))
  59.     console.log(admin)
  60.     if(!admin ){
  61.       next({path:'/login'})
  62.       location.reload()
  63.     }else{//检查token合法性
  64.       let token = admin.token
  65.       console.log(token)
  66.       axios({
  67.         url:"http://localhost:8080/user/checkToken",
  68.         method:'get',
  69.         Headers:{
  70.           token:admin.token
  71.         },
  72.         params:{
  73.           token:token
  74.         }
  75.       }).then((response) =>{
  76.         console.log(response.data)
  77.         if(!response.data ){ console.log('校验失败')
  78.         //  next({path:'/login'})
  79.      
  80.       
  81.         next({path:'/login'})
  82.         location.reload()
  83.         }
  84.          
  85.       })
  86.       next();
  88.     }
  89.   }
  90. })
  92. const originalPush = VueRouter.prototype.push
  93. VueRouter.prototype.push = function push(location, onResolve, onReject) {
  94. if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  95. return originalPush.call(this, location).catch(err => err)
  96. }
  99. export default router
复制代码
设置到期拦截

  1. package com.example.demo.demos.web.demo.controller;import cn.hutool.core.util.StrUtil;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import com.baomidou.mybatisplus.core.metadata.IPage;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;import com.example.demo.demos.web.demo.common.Constants;import com.example.demo.demos.web.demo.common.Result;import com.example.demo.demos.web.demo.entity.User;import com.example.demo.demos.web.demo.entity.UserDTO;import com.example.demo.demos.web.demo.entity.UserEntity;import com.example.demo.demos.web.demo.mapper.UserMapper;import com.example.demo.demos.web.demo.service.UserService;import com.example.demo.demos.web.demo.utils.JwtUtiles;import org.apache.ibatis.annotations.Param;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import java.util.HashMap;import java.util.List;import java.util.Map;@RestController@RequestMapping("user")public class UserController {   // @Autowired   // private UserMapper userMapper;    @Autowired    public UserService userService;/*        @GetMapping("/")        public List<UserEntity> index(){            return userMapper.findAll();        }*/    //使用mybtis-plus实现查询所有数据    @GetMapping("/")    public List<UserEntity> findAll(){        return userService.list();    }       /* @PostMapping("/add")        //这里做了一个单纯的添加的示例，使用的是mapper中的insert方法        public Integer save(@RequestBody UserEntity userEntity){                return userService.save(userEntity);        }*//*        @DeleteMapping("/{id}")        public Integer deleteById(@PathVariable Integer id){                return  userService.deleteById(id);        }*/    //使用mybtis-plus实现删除    @DeleteMapping("/{id}")    public boolean deleteById(@PathVariable Integer id){        return  userService.removeById(id);    }    @PostMapping    //使用mybtis-plus,注意这里返回的是boolean型    public Boolean save(@RequestBody UserEntity user) {        return userService.saveUser(user);    }    //使用mybtis-plus实现批量删除    @PostMapping("/del/batch/")    public boolean deleteBatch(@RequestBody List<Integer> ids){        return userService.removeByIds(ids);    }    //分页查询    //接口路径user/page?pageNum=1&pageSize=10    //RequestParam接受前台传过来的第几页，每页显示数/*    @GetMapping("/page")    public Map<String,Object> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize){        pageNum=(pageNum-1)*pageSize;        List<UserEntity> data=userService.selectPage(pageNum,pageSize);        Integer total=userMapper.selectTotal();        Map<String,Object> res=new HashMap<>();        res.put("data",data);        res.put("total",total);        return res;    }*/    //使用mybtis-plus实现根据ID查找记载    @GetMapping("/{id}")    public UserEntity findOne(@PathVariable Integer id){        return userService.getById(id);    }    //使用mybtis-plus实现模糊查询并分页    @GetMapping("/page")    public IPage<UserEntity> findPage(@RequestParam Integer pageNum,                                      @RequestParam Integer pageSize,                                      @RequestParam(defaultValue = "") String username,                                      @RequestParam(defaultValue = "") String nickname,                                      @RequestParam(defaultValue = "") String address){        IPage<UserEntity> page=new Page<>(pageNum,pageSize);        QueryWrapper<UserEntity> queryWrapper=new QueryWrapper<>();        queryWrapper.like("username",username);        queryWrapper.like("nickname",nickname);        queryWrapper.like("address",address);        return userService.page(page,queryWrapper);    }/*    @PostMapping("/login")    public Result login(@RequestBody UserDTO userDTO){        String username=userDTO.getUsername();//先对userDTO举行是否为空的校验        String password=userDTO.getPassword();        //调用hutool工具中的StrUtil函数实现用户名和密码是否为空的判断        if(StrUtil.isBlank(username) || StrUtil.isBlank(password)){            return Result.error(Constants.CODE_400,"参数错误");        }        UserDTO dto=userService.login(userDTO);        return Result.success(dto);    }*/    //定义两个初始常量登录名 这里不使用数据库认证
  2.     private final String USERNAME = "admin";
  3.     private final String PASSWORD = "admin";
  4.     @GetMapping("/login")
  6.     public User login(  User loginForm){
  7.         if(USERNAME.equals(loginForm.getUsername()) && PASSWORD.equals(loginForm.getPassword())){
  9.             //添加token
  10.             loginForm.setToken(JwtUtiles.createToken());
  11.             return loginForm;
  12.         }
  13.         return null;
  14.     }
  15.     @GetMapping("/checkToken")    public Boolean checkToken(HttpServletRequest  request,@RequestParam String token){        String token1 = token;        return JwtUtiles.checkToken(token1);    }}
复制代码
写解析方法

  1. package com.example.demo.demos.web.demo.utils;
  3. import io.jsonwebtoken.JwtBuilder;
  4. import io.jsonwebtoken.Jwts;
  5. import io.jsonwebtoken.SignatureAlgorithm;
  7. import java.util.Date;
  8. import java.util.UUID;
  10. public class JwtUtiles {
  12.     private static  long time = 1000* 6;//token有效时间
  13.     private static String signature = "admin";
  14.     public static String createToken(){
  15.         JwtBuilder jwtBuilder  = Jwts.builder();
  16.         String jwtToken = jwtBuilder
  17.                 .setHeaderParam("typ","JWT")
  18.                 .setHeaderParam("alg","HS256")
  19.                 .claim("username","admin")
  20.                 .claim("role","admin")
  21.                 .setSubject("admin-test")
  22.                 .setExpiration(new Date(System.currentTimeMillis()+time))
  23.                 .setId(UUID.randomUUID().toString())
  24.                 .signWith(SignatureAlgorithm.HS256,signature)
  25.                 .compact();
  26.         return jwtToken;
  27.     }
  29.     public static boolean checkToken(String token){
  30.         if(token == null){
  31.             return false;
  32.         }
  33.         try {
  34.             Jwts.parser().setSigningKey(signature).parseClaimsJws(token);
  35.         } catch (Exception e) {
  36.             return  false;
  37.         }
  38.         return  true;
  39.     }
  40. }
复制代码
login 页面
  1. <template>
  2.     <div class="login_container">
  3.        <div class="login_box">
  4.          <div style="margin:20px 0; text-align:center; font-size:24px" ><b>登录</b></div>
  5.          <!-- 用户名-->
  6.          <el-form ref="LoginFormRef" :model="loginForm" :rules="LoginFormRules" >
  7.            <el-form-item prop="username">
  8.              <el-input size="medium" style="margin:10px 0px;width: 300px;margin-left:25px" v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
  9.            </el-form-item>
  10.          <!-- 密码-->
  11.             <el-form-item prop="password">
  12.               <el-input size="medium" style="margin:10px 0px;width: 300px;margin-left:25px" show-password v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
  13.            </el-form-item>
  14.            <div style="margin:10px 0; text-align:center">
  15.              <el-button type="primary" size="small" @click="login" >登录</el-button>
  16.            <!--   <el-button type="warning" size="small" @click="resetLoginForm">重置</el-button> -->
  17.            </div>
  18.          </el-form>
  19.        </div>
  20.      </div>
  21.    </template>
  22.    
  23.    <script>
  24.      export default {
  25.        name:"Login",
  26.        data() {
  27.          return {
  28.            loginForm: {
  29.              username:'',
  30.              password:''
  31.            },
  32.            LoginFormRules:{
  33.              username:[
  34.                { required: true, message: '请输入用户名', trigger: 'blur' },
  35.              ],
  36.              password:[
  37.                { required: true, message: '请输入密码', trigger: 'blur' },
  38.              ]
  39.            }
  40.          }
  41.        },   
  43.        methods:{
  44.         login(){
  45.             this.$refs['LoginFormRef'].validate(async (valid) => {
  46.                 if (valid) {
  47.                   let _this = this;
  48.                     this.request.get("http://localhost:8080/user/login",{params:this.loginForm}).then(res=>{
  49.                     //  console.log(res)
  50.                       if(res != null){
  52.                         localStorage.setItem('access-admin',JSON.stringify(res))
  53.                         //跳转登录页
  54.                        // this.$router.replace({path:'/home'})
  55.                        this.$router.push("/home");
  56.                       }
  57.                    // console.log(res)
  58. /*                             if(res.code=='200'){
  59.                                 localStorage.setItem("user",JSON.stringify(res.data));//存储用户信息到浏览器
  60.                                 this.$router.push("/home");
  61.                                 this.$message.success("登录成功");
  62.                             }else{
  63.                                 this.$message.error(res.msg);
  64.                             } */
  65.                     })
  66.                 }  
  67.             })
  68.        },
  70.      }
  71.    
  72.     }
  73.    </script>
  74.    
  75.    <style scoped>
  76.      .login_container{
  77.        background-color: #2b4b6b;
  78.        height: 100%;
  79.      }
  80.    
  81.      .login_box{
  82.        width: 350px;
  83.        height: 300px;
  84.        background-color: #fff;
  85.        border-radius: 3px;
  86.        position: absolute;
  87.        left: 50%;
  88.        top: 50%;
  89.        transform: translate(-50%,-50%)
  90.      }
  91.    </style>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

美食家大橙子

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表