一、编写登录页面,让自己的页面有权限管理功能。
功能描述:账号密码正确,登录信息写入session中,则每个页面课可以通过读取session信息判断是否为有权限。如果没有写入session,或者session信息被清除了,则通过判断确定没有权限访问。
1, 启动项目后,直接访问index1.html,会出现没有权限访问的提示。
2、访问login.html页面输入账号秘密,如果不正确,提示错误。如果正确,则自动跳转到index1.html,再通过链接跳转到index2.html
3、通过页面中的退出登录链接,退出登录。
4、再访问index1.html,则提示没有权限访问的提示
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录后信息放在session中</title>
<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="js/element.css">
</head>
<body>
<div id="app">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name">tom</el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password">123</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el:"#app",
data:{
form: {
name: '',
password: ''
},
tableData: []
},
methods:{
onSubmit() {
var url = `/login_session`
console.log(this.form.name);
console.log(this.form.password);
axios.post(url, {
name: this.form.name,
password: this.form.password
})
.then(response => {
this.tableData = response.data;
console.log(this.tableData);
location.href = '/index1.html'
//注意,一定要退出登录,才能再次输入密码账号验证,否则session依然有效。
})
.catch(error=>{
console.error(error);
})
}
}
})
</script>
</body>
</html>
package com.itheima.controller;
import com.itheima.pojo.Result;
import com.itheima.service.EmpService;
import com.itheima.utils.JwtUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
@Slf4j
@RestController
public class LoginController {
@Autowired
private EmpService empService;
@PostMapping("/login")
public Result login(@RequestBody Emp emp){
log.info("员工登录: {}", emp);
Emp e = empService.login(emp);
//登录成功,生成令牌,下发令牌
if (e != null){
Map<String, Object> claims = new HashMap<>();
claims.put("id", e.getId());
claims.put("name", e.getName());
claims.put("username", e.getUsername());
String jwt = JwtUtils.generateJwt(claims); //jwt包含了当前登录的员工信息
return Result.success(jwt);
}
//登录失败, 返回错误信息
return Result.error("用户名或密码错误");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>必须成功登录才能访问</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<div v-if="tableData.code==1">
<h1 align="center">页面1--成功</h1>
<h2>
</h2>
<a href="index2.html">页面2</a>
<a href="logout">退出登录</a>
<table border="1">
<tr>
<th>id</th>
<th>author</th>
<th>gender</th>
<th>dynasty</th>
<th>title</th>
<th>style</th>
<th>操作</th>
</tr>
<!-- v-for="peot in tableData"-->
<tr>
<td>{{tableData.code}}</td>
<td>{{tableData.msg}}</td>
<td>{{tableData.data}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div v-else-if="tableData.code==0">
{{tableData.code}}没有权限访问!
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
tableData: {
code:"" ,
msg:"" ,
data:""
}
},
mounted() {
var url = `/index1`
axios.get(url)
.then(response => {
this.tableData = response.data;
console.log(this.tableData);
})
.catch(error=>{
console.error(error);
})
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>必须成功登录以后才能访问</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<div v-if="tableData.code==1">
<h1 align="center">页面2--成功</h1>
<h2>
</h2>
<a href="index1.html">页面1</a>
<a href="logout">退出登录</a>
<table border="1">
<tr>
<th>id</th>
<th>author</th>
<th>gender</th>
<th>dynasty</th>
<th>title</th>
<th>style</th>
<th>操作</th>
</tr>
<!-- v-for="peot in tableData"-->
<tr>
<td>{{tableData.code}}</td>
<td>{{tableData.msg}}</td>
<td>{{tableData.data}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div v-else-if="tableData.code==0">
{{tableData.code}}没有权限访问!
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
tableData: {
code:"" ,
msg:"" ,
data:""
}
},
mounted() {
var url = `/index2`
axios.get(url)
.then(response => {
//this.tableData = response.data;
this.tableData = response.data;
console.log(this.tableData);
})
.catch(error=>{
console.error(error);
})
}
})
</script>
</body>
</html>
@Mapper
public interface Users2Mapper {
@Select("select * from users where name=#{name} and password =#{password}")
public Users getBynameAndPassword2(Users users);
}
运行结果: