# springboot_jwt_react_demo

**Repository Path**: a654087143/springboot_jwt_react

## Basic Information

- **Project Name**: springboot_jwt_react_demo
- **Description**: 后端SpringBoot整合JWT 前端React 实现前后端分离身份和权限验证Demo
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-26
- **Last Updated**: 2021-04-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

- # Demo整体介绍  
  - 前端为React SPA 应用
  - 后端为SpringBoot  

  # 效果演示
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210225142151291.gif#pic_center)
  # 思路
  1. 配置拦截器拦截受保护Url路径，在这个拦截器中检查token，若检查通过则放行，否则返回error
  2. 针对特定用户和特定资源编写特定的拦截器，比如对Teacher角色才能访问的资源配置对应拦截器
  3. 登陆成功则返回token，前端保存到localstorage中，后面每次发送ajax请求访问受保护资源都需要携带这个token头
  # 项目用到的两张数据库表
  ```sql
  create database demosec;
  use demosec;
  #创建用户表
  create table if not exists `user`(
  	`id` integer primary key auto_increment,
  	`username` varchar(10) not null,
  	`password` varchar(64) not null
  	);
  insert into `user`(`username`, `password`) values("alice", "123"); #普通学生
  insert into `user`(`username`, `password`) values("pedro", "123"); #老师 
  #创建用户对应权限表 (这里的表划分应该更加详细，这里只做演示Demo用)
  create table if not exists `user_role` (
  	`id` integer primary key auto_increment,
  	`role` varchar(10) not null,
  	`uid` integer not null
  );
  insert into `user_role`(`role`, `uid`) values("student", 1); #赋予ID为1的Alice "学生权限"
  insert into `user_role`(`role`, `uid`) values("teacher", 2); #赋予ID为2的Pedro "老师权限"
  ```
  # 源码地址
  [Gitee仓库地址](https://gitee.com/AgustinKim/springboot_jwt_react)
  # 项目运行须知
  - 需要修改application.properties中数据库和redis相关配置
  - 需要进入front-end 然后 执行`npm install`
  - 运行前端：`npm start`

  # 欢迎大家找出问题！