mirror of
https://gitee.com/dromara/sa-token.git
synced 2024-11-30 02:48:10 +08:00
添加记住我demo演示项目
This commit is contained in:
hjc
parent
dc9cc3d742
commit
35eb274567
23
sa-token-demo/sa-token-demo-remeber-me/page_project/.gitignore
vendored
Normal file
23
sa-token-demo/sa-token-demo-remeber-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-remeber-me/page_project/src/App.vue
Normal file
161
sa-token-demo/sa-token-demo-remeber-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