@RestController
@RequestMapping("study")
public class AdminController {
private AdminService adminService;
@Autowired
public AdminController(AdminService adminService){
this.adminService=adminService;
}
@PostMapping("adminLogin")
public ResponseBean adminLogin(@RequestBody Admin admin) {
ResponseBean responseBean = adminService.getOneAdmin(admin.getName(), admin.getPwd());
if(responseBean.getCode()==1){ //登录成功时,返回带Token签名的Map对象
Map<String, String> tokenMap = new HashMap<>();
tokenMap.put("name", admin.getName()); //存放用户名,属于非敏感信息(不是密码)。
tokenMap.put("token", JWTUtil.generateToken(tokenMap)); //加密生成token
return ResponseBean.success(tokenMap);
}
return responseBean; //登录失败时
}
}
前端:
<el-dialog v-model="showLoginDialog" title="管理员登录">
<el-form :model="adminForm">
<el-form-item label-width="100px" label="账号:" required="required">
<el-input v-model="adminForm.name" placeholder="请输入管理员账号 admin"/>
</el-form-item>
<el-form-item label-width="100px" label="密码:" required="required">
<el-input v-model="adminForm.pwd" placeholder="请输入管理员密码 root"/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="showLoginDialog=false">取消</el-button>
<el-button @click="adminLogin" type="primary">确定</el-button>
</template>
</el-dialog>
<script>
export default {
data() {
return {
userId: '', //当前用户
showAdminLoginButton: '', //是否显示管理员登录按钮
showLoginDialog: false, //是否显示管理员登录对话框
adminForm: { name: '', pwd: ''},
isDisabled: '' //是否禁用登出链接
}
},
computed: { //计算属性
getName() { //获取当前用户名
return this.$store.state.userId //使用Vuex管理的状态
}
},
methods: {
initView() { //初始化根组件视图(运行项目或刷新页面时)
this.userId = window.sessionStorage.getItem("name") == null ?
'visitor' : window.sessionStorage.getItem("name")
this.$store.commit('login', this.userId) //提交一个名为 login的 mutation
},
adminLogin() {
this.$axios.post('adminLogin', { //请求管理员控制的登录方法
name: this.adminForm.name,
pwd: this.adminForm.pwd,
}).then(res => {
if(res.data.code == 1) {
console.log(res)
debugger
this.$message.success("登录成功!")
this.userId = res.data.data.name
this.isDisabled = false //启用登出按钮
this.showAdminLoginButton = !this.showAdminLoginButton //是否显示登录按钮?非此即彼
this.showLoginDialog = !this.showLoginDialog //是否显示登录对话框?非此即彼
//建立客户端会话存储,在浏览器调试窗口可查看
window.sessionStorage.setItem("token", res.data.data.token) //供身份验证用
window.sessionStorage.setItem("name", res.data.data.name) //供方法 initView()使用
this.$store.commit('login', this.userId) //触发store/index.js里作为mutations的login
} else {
this.$message.info(res.data.msg)
}
}).catch(err => {
console.log(err)
this.$message.error("后端Web服务器错误!是否启动?是否允许跨域访问?")
})
},
logout() {
this.$confirm('确定要退出登录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.clearSessionStorage() //清除本地会话存储
this.isDisabled = !this.isDisabled
this.showAdminLoginButton = !this.showAdminLoginButton //非此即彼
this.$store.commit('logout') //触发store/index.js里名为 logout的 mutation
})
},
clearSessionStorage() { //清除本地会话存储
window.sessionStorage.removeItem("name")
window.sessionStorage.removeItem("token")
this.userId = 'visitor'
}
},
mounted() {
this.initView()
}
}
原文链接:https://blog.csdn.net/qq_63695668/article/details/139927649
代码asdfadsf
最新推荐文章于 2025-04-24 17:20:34 发布