505 lines
15 KiB
Markdown
505 lines
15 KiB
Markdown
---
|
||
title: 毕业设计(4)
|
||
tags:
|
||
- java
|
||
- ssm
|
||
- react
|
||
- ant design
|
||
- typescript
|
||
categories: 毕业设计
|
||
date: 2022-12-14 12:40:32
|
||
summary: 登录实现
|
||
---
|
||
|
||
## 十、管理登录逻辑后端实现
|
||
|
||
管理员账号的账号密码从配置文件中读写
|
||
|
||
```java
|
||
@RestController
|
||
@PropertySource("classpath:config/config.properties")
|
||
@RequestMapping("/admin")
|
||
public class AdminController {
|
||
|
||
@Value("${admin.username}")
|
||
String username;
|
||
|
||
@Value("${admin.password}")
|
||
String password;
|
||
|
||
@PostMapping("/login")
|
||
public ResponseEntity<Resp<HashMap<String, String>>> login(@RequestBody Map<String,String> params){
|
||
String user = params.get("phone");
|
||
String pass = params.get("password");
|
||
HashMap<String, String> map = new HashMap<>();
|
||
if (user.equals(username) && pass.equals(password)){
|
||
map.put("phone",username);
|
||
map.put("password",password);
|
||
map.put("type","admin");
|
||
String token = Jwt.sign(map);
|
||
map.remove("password");
|
||
map.put("token",token);
|
||
return ResponseEntity.ok(Resp.Ok(map));
|
||
}
|
||
return ResponseEntity.status(HttpStatus.PAYMENT_REQUIRED).body(Resp.Err(403,null,map));
|
||
}
|
||
}
|
||
```
|
||
|
||
从 **config.propertie** 文件中中读取管理员的账号密码，然后配置登录的controller类，首先判断账号密码是否正确，正确就调用 **Jwt** 生成登录token,返回token到前端。
|
||
|
||
鉴权拦截器
|
||
|
||
在spring mvc的配置文件中配置拦截器，配置除了登陆地址以外全部拦截
|
||
|
||
```xml
|
||
<mvc:interceptors>
|
||
<mvc:interceptor>
|
||
<mvc:mapping path="/**"/>
|
||
<!-- 配置三个登陆地址不进行鉴权 -->
|
||
<mvc:exclude-mapping path="/admin/login"/>
|
||
<mvc:exclude-mapping path="/teacher/login"/>
|
||
<mvc:exclude-mapping path="/student/login"/>
|
||
<bean class="org.gjs.interceptor.AuthInterceptor" />
|
||
</mvc:interceptor>
|
||
</mvc:interceptors>
|
||
```
|
||
|
||
拦截器类
|
||
|
||
```java
|
||
@PropertySource("classpath:config/config.properties")
|
||
public class AuthInterceptor implements HandlerInterceptor {
|
||
|
||
@Value("${admin.username}")
|
||
String username;
|
||
|
||
@Value("${admin.password}")
|
||
String password;
|
||
|
||
|
||
@Resource
|
||
StudentService studentService;
|
||
|
||
@Resource
|
||
TeacherService teacherService;
|
||
|
||
|
||
@Override
|
||
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
|
||
String authorization = request.getHeader("Authorization");
|
||
if (authorization == null || authorization.equals("")){
|
||
response.sendError(401,"the auth fail!");
|
||
return false;
|
||
}else {
|
||
HashMap<String,Object> map = Jwt.verify(authorization.split(" ")[1], HashMap.class);
|
||
if (map==null){
|
||
throw new MyException("未登录！");
|
||
}
|
||
request.getSession().setAttribute("login_type",map.get("type"));
|
||
Object type = map.get("type");
|
||
if ("admin".equals(type)) {
|
||
if (map.get("phone").equals(username) && map.get("password").equals(password)) {
|
||
return true;
|
||
} else {
|
||
throw new MyException("未登录！");
|
||
}
|
||
} else if ("student".equals(type)) {
|
||
Student student = new Student();
|
||
student.setPhone((String) map.get("phone"));
|
||
student.setId((Integer) map.get("id"));
|
||
Page<Student> students = studentService.queryByPage(student, PageRequest.of(0, 100));
|
||
return students.getContent().size() >= 1;
|
||
} else if ("teacher".equals(type)) {
|
||
Teacher teacher = new Teacher();
|
||
teacher.setPhone((String) map.get("phone"));
|
||
teacher.setId((Integer) map.get("id"));
|
||
Page<Teacher> teachers = teacherService.queryByPage(teacher, PageRequest.of(0, 100));
|
||
return teachers.getContent().size() >= 1;
|
||
}
|
||
throw new Exception("权限检测错误！");
|
||
|
||
}
|
||
|
||
}
|
||
|
||
@Override
|
||
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
|
||
|
||
}
|
||
|
||
@Override
|
||
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
|
||
|
||
}
|
||
}
|
||
```
|
||
|
||
调用jwt解析前端携带的token,检测账号密码是否正确，如果正确则返回 **true**,否则抛出异常错误。
|
||
|
||
## 十一、前端基本配置
|
||
|
||
项目前端采用 **react+ant design**编写,语言使用 **typescript** ，开发工具使用 **webstorm** 。
|
||
|
||
首先使用webstorm创建react项目，使用typescript模板，然后添加依赖
|
||
|
||
### 添加依赖
|
||
|
||
```shell
|
||
yarn add antd
|
||
yarn add axios
|
||
yarn add react-router-dom
|
||
|
||
|
||
yarn add http-proxy-middleware -D
|
||
```
|
||
|
||
因为在项目开发过程中，需要解决跨域的问题，所以我们使用开发依赖 **http-proxy-middleware**，将前端的接口转发到本地开发地址。
|
||
|
||
### 解决本地调试跨域
|
||
|
||
**setupProxy.js**
|
||
|
||
```javascript
|
||
const { createProxyMiddleware } = require('http-proxy-middleware');
|
||
module.exports = function(app) {
|
||
app.use("/api",createProxyMiddleware({
|
||
target: "http://127.0.0.1:8080",
|
||
changeOrigin: true,
|
||
pathRewrite:{
|
||
"/api":"/"
|
||
}
|
||
}))
|
||
}
|
||
```
|
||
|
||
配置项目前端路由，在index.tsx中添加 **HashRouter**节点
|
||
|
||
### 配置根路由
|
||
|
||
**index.tsx**
|
||
|
||
```typescript
|
||
import React from 'react';
|
||
import ReactDOM from 'react-dom/client';
|
||
import './index.css';
|
||
import App from './App';
|
||
import reportWebVitals from './reportWebVitals';
|
||
import {HashRouter} from "react-router-dom";
|
||
|
||
const root = ReactDOM.createRoot(
|
||
document.getElementById('root') as HTMLElement
|
||
);
|
||
root.render(
|
||
<React.StrictMode>
|
||
<HashRouter>
|
||
<App />
|
||
</HashRouter>
|
||
</React.StrictMode>
|
||
);
|
||
reportWebVitals();
|
||
```
|
||
|
||
在App.tsx中添加基本页面，因为使用类组件开发，类组件中无法使用hooks等回调，所以将App组件使用WithRouter进行包装一下。
|
||
|
||
### 配置主页面
|
||
|
||
**App.tsx**
|
||
|
||
```typescript
|
||
import React, {Component} from 'react';
|
||
import './App.css';
|
||
import {
|
||
useLocation,
|
||
useNavigate,
|
||
useParams,
|
||
Routes,
|
||
Route
|
||
} from "react-router-dom";
|
||
import LoginPage from "./pages/LoginPage";
|
||
import {PageProps} from "./models/props";
|
||
import AdminPage from "./pages/admin/AdminPage";
|
||
import TeacherPage from "./pages/teacher/TeacherPage";
|
||
import StudentPage from "./pages/student/StudentPage";
|
||
import AddTeacher from "./pages/admin/AddTeacher";
|
||
|
||
|
||
function withRouter(Component: any) {
|
||
function ComponentWithRouterProp(props: any) {
|
||
let location = useLocation();
|
||
let navigate = useNavigate();
|
||
let params = useParams();
|
||
return (
|
||
<Component
|
||
{...props}
|
||
router={{location, navigate, params}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return ComponentWithRouterProp;
|
||
}
|
||
|
||
class App extends Component<PageProps, any> {
|
||
render() {
|
||
return <>
|
||
<Routes>
|
||
<Route path={"/login"} element={<LoginPage router={this.props.router}/>}/>
|
||
<Route path={"/admin/*"} element={<AdminPage router={this.props.router}/>}>
|
||
|
||
</Route>
|
||
<Route path={"/teacher"} element={<TeacherPage router={this.props.router}/>}/>
|
||
<Route path={"/student"} element={<StudentPage router={this.props.router}/>}/>
|
||
<Route path={"/"} element={<LoginPage router={this.props.router}/>}/>
|
||
</Routes>
|
||
</>
|
||
}
|
||
}
|
||
export default withRouter(App);
|
||
```
|
||
|
||
## 十一、前端登录页面实现
|
||
|
||
首先封装axios，封装axios的接口为工具类
|
||
|
||
后端返回的json将其封装为 **IResponseData**
|
||
|
||
### 封装axios
|
||
|
||
**request.ts**
|
||
|
||
```typescript
|
||
import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from "axios";
|
||
import {message} from "antd";
|
||
|
||
|
||
type TAxiosOption = {
|
||
baseURL: string;
|
||
timeout: number;
|
||
}
|
||
|
||
|
||
class Http {
|
||
service: AxiosInstance;
|
||
constructor(config:TAxiosOption) {
|
||
this.service = axios.create(config);
|
||
this.service.defaults.withCredentials = true
|
||
this.service.interceptors.request.use(
|
||
(value)=>{
|
||
if (value.headers !== null){
|
||
// @ts-ignore
|
||
value.headers.Authorization = "Bearer "+sessionStorage.getItem("work_token")
|
||
}
|
||
return value
|
||
},()=>{
|
||
console.log("请求异常")
|
||
})
|
||
this.service.interceptors.response.use((value:AxiosResponse<IResponseData<any>>)=>{
|
||
console.log(value)
|
||
return value
|
||
},(error)=>{
|
||
console.log(error.response.data.message)
|
||
if (error.response.data.message !== ""){
|
||
message.error(error.response.data.message).then(() => {})
|
||
}
|
||
if (error.response.status === 401){
|
||
window.location.hash = "/login"
|
||
}
|
||
return error
|
||
})
|
||
}
|
||
|
||
get<T>(url: string, params?: object, _object = {}): Promise<AxiosResponse<IResponseData<T>>> {
|
||
return this.service.get(url, { params, ..._object })
|
||
}
|
||
post<T>(url: string, data?: object, _object:AxiosRequestConfig = {}): Promise<AxiosResponse<IResponseData<T>>> {
|
||
return this.service.post(url, data, _object)
|
||
}
|
||
put<T>(url: string, params?: object, _object = {}): Promise<AxiosResponse<IResponseData<T>>> {
|
||
return this.service.put(url, params, _object)
|
||
}
|
||
delete<T>(url: string, params?: any, _object = {}): Promise<AxiosResponse<IResponseData<T>>> {
|
||
return this.service.delete(url, { params, ..._object })
|
||
}
|
||
}
|
||
|
||
export default Http
|
||
|
||
export interface IResponseData<T> {
|
||
success: boolean;
|
||
message?:string;
|
||
data:T;
|
||
code: number;
|
||
error?:string
|
||
}
|
||
```
|
||
|
||
封装调用后端api的接口为一个类
|
||
|
||
### 封装接口
|
||
|
||
**api.ts**
|
||
|
||
```typescript
|
||
import Http, {IResponseData} from "./request";
|
||
import {
|
||
AdminClass,
|
||
GetAdminClassResp,
|
||
GetStudentResp,
|
||
GetTeacherClassResp,
|
||
GetTeacherResp,
|
||
LoginResp,
|
||
Student,
|
||
Teacher
|
||
} from "../models/resp";
|
||
|
||
let http = new Http({
|
||
baseURL: "/",
|
||
timeout: 30000
|
||
});
|
||
|
||
let base = process.env.REACT_APP_BASE_URL
|
||
|
||
class Api {
|
||
|
||
login = async function(type:string, username: string, password: string) {
|
||
let data = await http.post<LoginResp>(`${base}/${type}/login`,{
|
||
"phone": username,
|
||
"password": password
|
||
});
|
||
|
||
return data.data
|
||
}
|
||
}
|
||
|
||
export default new Api()
|
||
```
|
||
|
||
登录页面组件采用Layout进行管理，在header组件中添加页面标题，在content组件中添加Form表单。
|
||
|
||
### 登录主页面
|
||
|
||
```typescript
|
||
import {Component} from "react";
|
||
import {PageProps} from "../models/props";
|
||
import {Button, Checkbox, Form, Input, Layout, Select} from "antd";
|
||
|
||
import { Col, Row } from 'antd';
|
||
|
||
import loginImg from "../img/loginnew-img.jpg";
|
||
|
||
import '../utils/api'
|
||
import api from "../utils/api";
|
||
const { Header, Footer, Content } = Layout;
|
||
|
||
|
||
const options = [
|
||
{
|
||
"label": "学生",
|
||
"value": "student"
|
||
},
|
||
{
|
||
"label": "老师",
|
||
"value": "teacher"
|
||
},
|
||
{
|
||
"label": "家长",
|
||
"value": "patriarch"
|
||
},
|
||
{
|
||
"label": "管理员",
|
||
"value": "admin"
|
||
}
|
||
]
|
||
|
||
class LoginPage extends Component<PageProps, any>{
|
||
|
||
|
||
onSubmit = (value:any) => {
|
||
api.login(value.type,value.phone,value.password).then(resp => {
|
||
if (resp.code === 200){
|
||
sessionStorage.setItem("work_token",resp.data.token)
|
||
this.props.router.navigate(`/${value.type}`)
|
||
}
|
||
})
|
||
}
|
||
|
||
render() {
|
||
return (<>
|
||
<Layout style={{height: "100%"}}>
|
||
<Header style={{backgroundColor:"white",height: "18%"}}>
|
||
<Row style={{height: "100%"}}>
|
||
<Col style={{height:"100%"}} span={8}>
|
||
<h1 style={{textAlign:"right",fontSize:"30px",marginTop:"40px",color:"#88c9b4"}}>分 层 教 学 作 业 收 集 系 统</h1>
|
||
</Col>
|
||
<Col span={16} />
|
||
|
||
</Row>
|
||
</Header>
|
||
<Content>
|
||
<Row style={{height: "100%"}}>
|
||
<Col style={{height:"100%"}} span={12}>
|
||
<img width={"100%"} height={"100%"} src={loginImg} alt="图片"/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<h1 style={{textAlign:"center",fontSize:"30px",paddingLeft:"70px"}}>登 录</h1>
|
||
<div style={{height:"5%"}}/>
|
||
<Form
|
||
name="basic"
|
||
labelCol={{ span: 8 }}
|
||
wrapperCol={{ span: 16 }}
|
||
initialValues={{ remember: true }}
|
||
autoComplete="off"
|
||
onFinish={this.onSubmit}
|
||
>
|
||
<Form.Item
|
||
label="角色"
|
||
name="type"
|
||
initialValue={"student"}
|
||
rules={[{ required: true, message: '请选择角色!' }]}
|
||
>
|
||
<Select size={"large"} options={options} />
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="账号"
|
||
name="phone"
|
||
rules={[{ required: true, message: '请输入账号!' }]}
|
||
>
|
||
<Input size={"large"}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="密码"
|
||
name="password"
|
||
rules={[{ required: true, message: '请输入密码!' }]}
|
||
>
|
||
<Input.Password size={"large"} />
|
||
</Form.Item>
|
||
|
||
<Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
|
||
<Checkbox>记住密码</Checkbox>
|
||
</Form.Item>
|
||
|
||
<Form.Item wrapperCol={{ offset: 13, span: 16 }}>
|
||
<Button size={"large"} type="primary" htmlType="submit">
|
||
登 录
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</Col>
|
||
<Col span={6}>
|
||
|
||
</Col>
|
||
</Row>
|
||
</Content>
|
||
<Footer style={{backgroundColor:"white",height: "23%"}} />
|
||
</Layout>
|
||
|
||
</>)
|
||
}
|
||
}
|
||
|
||
|
||
export default LoginPage
|
||
```
|