mirror of
https://gitee.com/dromara/sa-token.git
synced 2025-08-25 01:14:23 +08:00
!234 添加rememberMe功能的demo项目
Merge pull request !234 from AppleOfGray/dev
This commit is contained in:
孔明
Gitee
commit
a67a95956d
23
sa-token-demo/sa-token-demo-remember-me/page_project/.gitignore
vendored
Normal file
23
sa-token-demo/sa-token-demo-remember-me/page_project/.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
# vite创建项目时自动生成的git忽略配置文件
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
[Node下载地址](https://nodejs.org/zh-cn/)
|
||||||
|
|
||||||
|
安装最新版本Node环境, 然后执行如下命令开启开发服务:
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
[cookie/sessionstorage/localstorage三者的区别](https://blog.csdn.net/weixin_45541388/article/details/125367823)
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>记住我模式Demo页面</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "page_project",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.3.4",
|
||||||
|
"element-plus": "^2.2.33",
|
||||||
|
"qs": "^6.11.0",
|
||||||
|
"vue": "^3.2.45",
|
||||||
|
"vue-axios": "^3.5.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
|
"vite": "^4.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
161
sa-token-demo/sa-token-demo-remember-me/page_project/src/App.vue
Normal file
161
sa-token-demo/sa-token-demo-remember-me/page_project/src/App.vue
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mainLayoutClass">
|
||||||
|
<div class="loginClass">
|
||||||
|
<div class="titleClass">
|
||||||
|
账户登录
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-input v-model="name" placeholder="账号" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-input v-model="passwd" placeholder="密码" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
<el-switch v-model="rememberMe" />
|
||||||
|
</span>
|
||||||
|
<span class="tipInfoClass" @click="rememberMe = !rememberMe">记住我</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="primary" style="width: 100%;" @click="loginFun">登录</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stateClass">
|
||||||
|
<div class="titleClass">当前登录状态:</div>
|
||||||
|
<div class="titleClass">{{ loginState }}</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="primary" style="width: 100%;" @click="checkLoginStateFun">刷新登录状态</el-button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="danger" style="width: 100%;" @click="logoutFun">退出</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted () {
|
||||||
|
if (localStorage.getItem('rememberMe') === 'true') {
|
||||||
|
this.rememberMe = true
|
||||||
|
}
|
||||||
|
this.checkLoginStateFun()
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
name: 'zhang',
|
||||||
|
passwd: '123456',
|
||||||
|
rememberMe: false,
|
||||||
|
loginState: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loginFun () {
|
||||||
|
this.axios.post('/back/user/login', this.$f({
|
||||||
|
name: this.name,
|
||||||
|
pwd: this.passwd,
|
||||||
|
remember: this.rememberMe
|
||||||
|
})).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.loginState = true
|
||||||
|
const { tokenName, tokenValue } = res.data
|
||||||
|
localStorage.setItem('tokenName', tokenName)
|
||||||
|
if (this.rememberMe) {
|
||||||
|
localStorage.setItem('tokenValue', tokenValue)
|
||||||
|
} else {
|
||||||
|
sessionStorage.setItem('tokenValue', tokenValue)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$message.error('网络异常')
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message.error('无法访问后台服务')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
checkLoginStateFun () {
|
||||||
|
let tokenName, tokenValue
|
||||||
|
tokenName = localStorage.getItem('tokenName')
|
||||||
|
if (this.rememberMe) {
|
||||||
|
tokenValue = localStorage.getItem('tokenValue')
|
||||||
|
} else {
|
||||||
|
tokenValue = sessionStorage.getItem('tokenValue')
|
||||||
|
}
|
||||||
|
const param = {}
|
||||||
|
param[tokenName] = tokenValue
|
||||||
|
this.axios.post('/back/user/state', this.$f(param))
|
||||||
|
.then(res => {
|
||||||
|
debugger
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.loginState = res.data.data
|
||||||
|
} else {
|
||||||
|
this.$message.error('网络异常')
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message.error('无法访问后台服务')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
logoutFun () {
|
||||||
|
// ------------------------------------------------------------------------
|
||||||
|
// 重复的部分可以写到外部js统一封装或通过axios的拦截器添加token参数, 这里只做演示
|
||||||
|
let tokenName, tokenValue
|
||||||
|
tokenName = localStorage.getItem('tokenName')
|
||||||
|
if (this.rememberMe) {
|
||||||
|
tokenValue = localStorage.getItem('tokenValue')
|
||||||
|
} else {
|
||||||
|
tokenValue = sessionStorage.getItem('tokenValue')
|
||||||
|
}
|
||||||
|
const param = {}
|
||||||
|
param[tokenName] = tokenValue
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
this.axios.post('/back/user/logout', this.$f(param))
|
||||||
|
.then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.loginState = res.data.data
|
||||||
|
} else {
|
||||||
|
this.$message.error('网络异常')
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message.error('无法访问后台服务')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
rememberMe (newValue, oldValue) {
|
||||||
|
// 打开不同页面时使 记住我 的状态保持一致
|
||||||
|
localStorage.setItem('rememberMe', newValue)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.mainLayoutClass{
|
||||||
|
padding: 0 25%;
|
||||||
|
padding-top: 20vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.loginClass{
|
||||||
|
min-width: 300px;
|
||||||
|
height: 210px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.titleClass{
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.tipInfoClass{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.stateClass{
|
||||||
|
min-width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import axios from 'axios' // 请求发送接收工具
|
||||||
|
import VueAxios from 'vue-axios' // vue封装axios
|
||||||
|
import qs from 'qs' // axios请求参数类型封装
|
||||||
|
import ElementPlus from 'element-plus' // elementUI for vue3
|
||||||
|
import 'element-plus/dist/index.css' // 加载elementUI样式
|
||||||
|
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入中文本地化组件
|
||||||
|
|
||||||
|
|
||||||
|
app = createApp(App)
|
||||||
|
|
||||||
|
// vue组件内通过 this.$f() 来调用
|
||||||
|
app.config.globalProperties.$f = (params) => {
|
||||||
|
return qs.stringify(params)
|
||||||
|
}
|
||||||
|
|
||||||
|
app.use(VueAxios, axios)
|
||||||
|
.use(ElementPlus, { locale: zhCn })
|
||||||
|
.mount('#app')
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// 开启代理服务
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
port: 5173,
|
||||||
|
host: true,
|
||||||
|
proxy: {
|
||||||
|
'^/back/.*$': {
|
||||||
|
target: 'http://localhost:80'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project xmlns="http://maven.apache.org/POM/4.0.0"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||||
|
<modelVersion>4.0.0</modelVersion>
|
||||||
|
|
||||||
|
<groupId>cn.dev33</groupId>
|
||||||
|
<artifactId>remember_me</artifactId>
|
||||||
|
<version>1.0-SNAPSHOT</version>
|
||||||
|
|
||||||
|
<!-- SpringBoot -->
|
||||||
|
<parent>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-parent</artifactId>
|
||||||
|
<version>2.5.14</version>
|
||||||
|
<relativePath/>
|
||||||
|
</parent>
|
||||||
|
|
||||||
|
<properties>
|
||||||
|
<sa-token.version>1.34.0</sa-token.version>
|
||||||
|
</properties>
|
||||||
|
|
||||||
|
<dependencies>
|
||||||
|
<!-- SpringBoot Web依赖 -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-web</artifactId>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<!-- Sa-Token 权限认证, 在线文档：https://sa-token.cc/ -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>cn.dev33</groupId>
|
||||||
|
<artifactId>sa-token-spring-boot-starter</artifactId>
|
||||||
|
<version>${sa-token.version}</version>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<!-- Sa-Token 插件：整合redis (使用jackson序列化方式) -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>cn.dev33</groupId>
|
||||||
|
<artifactId>sa-token-dao-redis-jackson</artifactId>
|
||||||
|
<version>${sa-token.version}</version>
|
||||||
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.apache.commons</groupId>
|
||||||
|
<artifactId>commons-pool2</artifactId>
|
||||||
|
</dependency>
|
||||||
|
</dependencies>
|
||||||
|
</project>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
package cc.sa_token;
|
||||||
|
|
||||||
|
import org.springframework.boot.SpringApplication;
|
||||||
|
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||||
|
|
||||||
|
@SpringBootApplication
|
||||||
|
public class RememberMeApplication {
|
||||||
|
public static void main(String[] args) {
|
||||||
|
SpringApplication.run(RememberMeApplication.class, args);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
package cc.sa_token.controller;
|
||||||
|
|
||||||
|
import cn.dev33.satoken.stp.SaTokenInfo;
|
||||||
|
import cn.dev33.satoken.stp.StpUtil;
|
||||||
|
import cn.dev33.satoken.util.SaResult;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
|
@RestController
|
||||||
|
@RequestMapping("/back/user")
|
||||||
|
public class UserLoginController {
|
||||||
|
|
||||||
|
@RequestMapping("/login")
|
||||||
|
public SaResult doLogin(String name, String pwd, Boolean remember) {
|
||||||
|
if("zhang".equals(name) && "123456".equals(pwd)) {
|
||||||
|
StpUtil.login(10001, remember);
|
||||||
|
SaTokenInfo tokenInfo = StpUtil.getTokenInfo();
|
||||||
|
return SaResult.ok()
|
||||||
|
.set("tokenName", tokenInfo.getTokenName())
|
||||||
|
.set("tokenValue", tokenInfo.getTokenValue());
|
||||||
|
} else {
|
||||||
|
return SaResult.error("登录失败");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@RequestMapping("/state")
|
||||||
|
public SaResult checkNowLoginState() {
|
||||||
|
return SaResult.ok().setData(StpUtil.isLogin());
|
||||||
|
}
|
||||||
|
|
||||||
|
@RequestMapping("/logout")
|
||||||
|
public SaResult doLogout() {
|
||||||
|
StpUtil.logout();
|
||||||
|
return SaResult.ok().setData(StpUtil.isLogin());
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
# 端口
|
||||||
|
server:
|
||||||
|
port: 80
|
||||||
|
|
||||||
|
# sa-token配置
|
||||||
|
sa-token:
|
||||||
|
# token名称 (同时也是cookie名称)
|
||||||
|
token-name: satoken
|
||||||
|
# token有效期，单位s 默认30天, -1代表永不过期
|
||||||
|
timeout: 2592000
|
||||||
|
# token临时有效期 (指定时间内无操作就视为token过期) 单位: 秒
|
||||||
|
activity-timeout: -1
|
||||||
|
# 是否允许同一账号并发登录 (为true时允许一起登录, 为false时新登录挤掉旧登录)
|
||||||
|
is-concurrent: true
|
||||||
|
# 禁止写入cookie
|
||||||
|
is-read-cookie: false
|
||||||
|
# 在多人登录同一账号时，是否共用一个token (为true时所有登录共用一个token, 为false时每次登录新建一个token)
|
||||||
|
is-share: false
|
||||||
|
# token风格
|
||||||
|
token-style: uuid
|
||||||
|
# 是否输出操作日志
|
||||||
|
is-log: false
|
||||||
|
|
||||||
|
spring:
|
||||||
|
# redis配置
|
||||||
|
redis:
|
||||||
|
# Redis数据库索引（默认为0）
|
||||||
|
database: 0
|
||||||
|
# Redis服务器地址
|
||||||
|
host: 127.0.0.1
|
||||||
|
# Redis服务器连接端口
|
||||||
|
port: 6379
|
||||||
|
# Redis服务器连接密码（默认为空）
|
||||||
|
password:
|
||||||
|
# 连接超时时间
|
||||||
|
timeout: 10s
|
||||||
|
lettuce:
|
||||||
|
pool:
|
||||||
|
# 连接池最大连接数
|
||||||
|
max-active: 200
|
||||||
|
# 连接池最大阻塞等待时间（使用负值表示没有限制）
|
||||||
|
max-wait: -1ms
|
||||||
|
# 连接池中的最大空闲连接
|
||||||
|
max-idle: 10
|
||||||
|
# 连接池中的最小空闲连接
|
||||||
|
min-idle: 0
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user