mirror of
https://gitee.com/dromara/sa-token.git
synced 2026-01-08 17:34:36 +08:00
更新
This commit is contained in:
hjc
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user