mirror of
https://gitee.com/dromara/sa-token.git
synced 2025-04-05 17:37:53 +08:00
新增跨域 demo 示例
This commit is contained in:
click33
parent
8dfc4c837c
commit
fd5a162c75
mvn clean.bat
sa-token-demo/sa-token-demo-cross
sa-token-demo-cross-cookie-h5
sa-token-demo-cross-cookie-server
sa-token-demo-cross-cookie-vue3
sa-token-demo-cross-header-h5
sa-token-demo-cross-header-server
sa-token-demo-cross-header-vue3
sa-token-doc/start
@ -47,6 +47,11 @@ cd sa-token-demo-oauth2-client & call mvn clean & cd ..
|
||||
cd sa-token-demo-oauth2-server & call mvn clean & cd ..
|
||||
cd ..
|
||||
|
||||
cd sa-token-demo-cross
|
||||
cd sa-token-demo-cross-header-server & call mvn clean & cd ..
|
||||
cd sa-token-demo-cross-cookie-server & call mvn clean & cd ..
|
||||
cd ..
|
||||
|
||||
cd sa-token-demo-dubbo
|
||||
cd sa-token-demo-dubbo-consumer & call mvn clean & cd ..
|
||||
cd sa-token-demo-dubbo-provider & call mvn clean & cd ..
|
||||
|
||||
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title> Sa-Token 跨域测试 - Cookie 版，h5 页面 </title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="text-align: center; padding-top: 200px;">
|
||||
<h2> Sa-Token 跨域测试 - Cookie 版，h5 页面 </h2>
|
||||
<p>当前是否登录：<b class="is-login"></b></p>
|
||||
<p>
|
||||
<a href="javascript: doLogin();">登录</a>
|
||||
<a href="javascript: doLogout();">注销</a>
|
||||
</p>
|
||||
</div>
|
||||
<script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
|
||||
<script src="./method-util.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// 查询当前会话是否登录
|
||||
function isLogin() {
|
||||
ajax('/acc/isLogin', {}, function (res) {
|
||||
$('.is-login').html(res.data + '');
|
||||
})
|
||||
}
|
||||
isLogin();
|
||||
|
||||
// 去登录
|
||||
function doLogin() {
|
||||
const param = {
|
||||
name: "zhang",
|
||||
pwd: "123456"
|
||||
}
|
||||
ajax('/acc/doLogin', param, function (res) {
|
||||
if(res.code === 200) {
|
||||
// 浏览器会自动在 cookie 中保存 token
|
||||
localStorage.satoken = res.token;
|
||||
$('.is-login').html('true');
|
||||
alert('登录成功');
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 去注销
|
||||
function doLogout() {
|
||||
ajax('/acc/logout', {}, function (res) {
|
||||
if(res.code === 200) {
|
||||
// 浏览器会自动清除 cookie 中的 token
|
||||
$('.is-login').html('false');
|
||||
alert('注销成功');
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
|
||||
// 后端服务地址 (在 Cookie 版跨域模式中，此处应该是一个 https 地址)
|
||||
// var baseUrl = "http://localhost:8081";
|
||||
var baseUrl = "https://20e331r221.yicp.fun";
|
||||
|
||||
// 封装一下 Ajax 方法
|
||||
var ajax = function(path, data, successFn) {
|
||||
$.ajax({
|
||||
url: baseUrl + path,
|
||||
type: "post",
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
// 指定是跨域模式，需要提交第三方 Cookie
|
||||
crossDomain: true,
|
||||
xhrFields:{
|
||||
withCredentials: true
|
||||
},
|
||||
headers: {
|
||||
"X-Requested-With": "XMLHttpRequest"
|
||||
},
|
||||
success: function(res){
|
||||
successFn(res);
|
||||
},
|
||||
error: function(xhr, type, errorThrown){
|
||||
return alert("异常：" + JSON.stringify(xhr));
|
||||
}
|
||||
});
|
||||
}
|
||||
12
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-cookie-server/.gitignore
vendored
Normal file
12
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-cookie-server/.gitignore
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
target/
|
||||
|
||||
node_modules/
|
||||
bin/
|
||||
.settings/
|
||||
unpackage/
|
||||
.classpath
|
||||
.project
|
||||
|
||||
.idea/
|
||||
|
||||
.factorypath
|
||||
@ -0,0 +1,42 @@
|
||||
<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>sa-token-demo-cross-cookie-server</artifactId>
|
||||
<version>0.0.1-SNAPSHOT</version>
|
||||
|
||||
<!-- SpringBoot -->
|
||||
<parent>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-parent</artifactId>
|
||||
<version>2.5.15</version>
|
||||
<relativePath/>
|
||||
</parent>
|
||||
|
||||
<!-- 定义 Sa-Token 版本号 -->
|
||||
<properties>
|
||||
<sa-token.version>1.34.1</sa-token.version>
|
||||
<java.run.main.class>com.pj.SaTokenCrossCookieApplication</java.run.main.class>
|
||||
</properties>
|
||||
|
||||
<dependencies>
|
||||
|
||||
<!-- SpringBoot依赖 -->
|
||||
<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>
|
||||
|
||||
</dependencies>
|
||||
|
||||
|
||||
|
||||
</project>
|
||||
@ -0,0 +1,21 @@
|
||||
package com.pj;
|
||||
|
||||
import cn.dev33.satoken.SaManager;
|
||||
import org.springframework.boot.SpringApplication;
|
||||
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||
|
||||
|
||||
/**
|
||||
* Sa-Token 跨域测试（Cookie 版）
|
||||
* @author click33
|
||||
*/
|
||||
@SpringBootApplication
|
||||
public class SaTokenCrossCookieApplication {
|
||||
|
||||
public static void main(String[] args) {
|
||||
SpringApplication.run(SaTokenCrossCookieApplication.class, args);
|
||||
System.out.println("\n启动成功，Sa-Token 配置如下：" + SaManager.getConfig());
|
||||
System.out.println("\n后端地址使用 https://xxx.com 访问（必须为 https 连接），前端页面用 http://127.0.0.1 访问");
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
package com.pj.test;
|
||||
|
||||
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("/acc/")
|
||||
public class LoginController {
|
||||
|
||||
// 登录 ---- http://localhost:8081/acc/doLogin?name=zhang&pwd=123456
|
||||
@RequestMapping("doLogin")
|
||||
public SaResult doLogin(String name, String pwd) {
|
||||
if("zhang".equals(name) && "123456".equals(pwd)) {
|
||||
StpUtil.login(10001);
|
||||
// 要点：通过请求响应体返回 token 信息
|
||||
return SaResult.ok("登录成功");
|
||||
}
|
||||
return SaResult.error("登录失败");
|
||||
}
|
||||
|
||||
// 注销 ---- http://localhost:8081/acc/logout
|
||||
@RequestMapping("logout")
|
||||
public SaResult logout() {
|
||||
StpUtil.logout();
|
||||
return SaResult.ok();
|
||||
}
|
||||
|
||||
// 查询登录状态 ---- http://localhost:8081/acc/isLogin
|
||||
@RequestMapping("isLogin")
|
||||
public SaResult isLogin() {
|
||||
boolean isLogin = StpUtil.isLogin();
|
||||
System.out.println("当前会话是否登录：" + isLogin);
|
||||
return SaResult.data(isLogin);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
package com.pj.test;
|
||||
|
||||
import cn.dev33.satoken.SaManager;
|
||||
import cn.dev33.satoken.context.SaHolder;
|
||||
import cn.dev33.satoken.context.model.SaRequest;
|
||||
import cn.dev33.satoken.filter.SaServletFilter;
|
||||
import cn.dev33.satoken.interceptor.SaInterceptor;
|
||||
import cn.dev33.satoken.router.SaHttpMethod;
|
||||
import cn.dev33.satoken.router.SaRouter;
|
||||
import cn.dev33.satoken.stp.StpUtil;
|
||||
import cn.dev33.satoken.util.SaResult;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
|
||||
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
|
||||
|
||||
|
||||
/**
|
||||
* [Sa-Token 权限认证] 配置类
|
||||
* @author click33
|
||||
*
|
||||
*/
|
||||
@Configuration
|
||||
public class SaTokenConfigure implements WebMvcConfigurer {
|
||||
|
||||
/**
|
||||
* 注册 [Sa-Token 全局过滤器]
|
||||
*/
|
||||
@Bean
|
||||
public SaServletFilter getSaServletFilter() {
|
||||
return new SaServletFilter()
|
||||
|
||||
// 指定 [拦截路由] 与 [放行路由]
|
||||
.addInclude("/**").addExclude("/favicon.ico")
|
||||
|
||||
// 认证函数: 每次请求执行
|
||||
.setAuth(obj -> {
|
||||
SaManager.getLog().debug("----- 请求path={} 提交token={}", SaHolder.getRequest().getRequestPath(), StpUtil.getTokenValue());
|
||||
// ...
|
||||
})
|
||||
|
||||
// 异常处理函数：每次认证函数发生异常时执行此函数
|
||||
.setError(e -> {
|
||||
return SaResult.error(e.getMessage());
|
||||
})
|
||||
|
||||
// 前置函数：在每次认证函数之前执行
|
||||
.setBeforeAuth(obj -> {
|
||||
|
||||
// 获得客户端domain
|
||||
SaRequest request = SaHolder.getRequest();
|
||||
String origin = request.getHeader("Origin");
|
||||
if (origin == null) {
|
||||
origin = request.getHeader("Referer");
|
||||
}
|
||||
|
||||
// ---------- 设置跨域响应头 ----------
|
||||
SaHolder.getResponse()
|
||||
// 允许第三方 Cookie
|
||||
.setHeader("Access-Control-Allow-Credentials", "true")
|
||||
// 允许指定域访问跨域资源
|
||||
.setHeader("Access-Control-Allow-Origin", origin)
|
||||
// 允许所有请求方式
|
||||
.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE")
|
||||
// 有效时间
|
||||
.setHeader("Access-Control-Max-Age", "3600")
|
||||
// 允许的header参数
|
||||
.setHeader("Access-Control-Allow-Headers", "x-requested-with,satoken");
|
||||
|
||||
// 如果是预检请求，则立即返回到前端
|
||||
SaRouter.match(SaHttpMethod.OPTIONS)
|
||||
.free(r -> System.out.println("--------OPTIONS预检请求，不做处理"))
|
||||
.back();
|
||||
})
|
||||
;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
# 端口
|
||||
server:
|
||||
port: 8081
|
||||
|
||||
sa-token:
|
||||
is-log: true
|
||||
cookie:
|
||||
# 指明当前为 https 安全连接
|
||||
secure: true
|
||||
# 指明第三方 Cookie 限制级别为：不限制
|
||||
sameSite: None
|
||||
24
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-cookie-vue3/.gitignore
vendored
Normal file
24
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-cookie-vue3/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,20 @@
|
||||
# Sa-Token 跨域测试 - Cookie 版，vue3 页面
|
||||
|
||||
在线文档：[https://sa-token.cc/](https://sa-token.cc/)
|
||||
|
||||
|
||||
## 运行
|
||||
先安装依赖
|
||||
``` bat
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
运行
|
||||
``` bat
|
||||
npm run dev
|
||||
```
|
||||
|
||||
打包
|
||||
``` bat
|
||||
npm run build
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title> Sa-Token 跨域测试 - Cookie 版，vue3 页面 </title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1362
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-cookie-vue3/package-lock.json
generated
Normal file
1362
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-cookie-vue3/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "sa-token-demo-cross-cookie-vue3",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.1.3",
|
||||
"vue": "^3.2.41",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"vite": "^3.2.7"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After 
(image error) Size: 1.5 KiB |
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After 
(image error) Size: 496 B |
@ -0,0 +1,14 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
// createApp
|
||||
const app = createApp(App);
|
||||
|
||||
// 安装 vue-router
|
||||
import router from './router';
|
||||
app.use(router);
|
||||
|
||||
|
||||
|
||||
// 绑定dom
|
||||
app.mount('#app');
|
||||
@ -0,0 +1,25 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||
|
||||
/**
|
||||
* 创建 vue-router 实例
|
||||
*/
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
// 首页
|
||||
{
|
||||
name: 'index',
|
||||
path: "/index",
|
||||
component: () => import('../views/index.vue'),
|
||||
},
|
||||
|
||||
// 访问 / 时自动重定向到 /index
|
||||
{
|
||||
path: "/",
|
||||
redirect: '/index'
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
// 导出
|
||||
export default router;
|
||||
@ -0,0 +1,63 @@
|
||||
<!-- 项目首页 -->
|
||||
<template>
|
||||
<div style="text-align: center; padding-top: 200px;">
|
||||
<h2> Sa-Token 跨域测试 - Cookie 版，Vue3页面 </h2>
|
||||
<p>当前是否登录：<b>{{ state.isLogin }}</b></p>
|
||||
<p>
|
||||
<a href="javascript:;" @click="doLogin">登录</a>
|
||||
<a href="javascript:;" @click="doLogout">注销</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import {baseUrl, ajax} from './method-util.js'
|
||||
|
||||
// 是否登录
|
||||
const state = reactive({
|
||||
isLogin: false
|
||||
})
|
||||
|
||||
onMounted(function(){
|
||||
isLogin();
|
||||
})
|
||||
|
||||
// 查询当前会话是否登录
|
||||
const isLogin = function() {
|
||||
ajax('/acc/isLogin', {}, function (res) {
|
||||
state.isLogin = res.data;
|
||||
})
|
||||
}
|
||||
|
||||
// 去登录
|
||||
const doLogin = function() {
|
||||
const param = {
|
||||
name: "zhang",
|
||||
pwd: "123456"
|
||||
}
|
||||
ajax('/acc/doLogin', param, function (res) {
|
||||
if(res.code === 200) {
|
||||
// 浏览器会自动在 cookie 中保存 token
|
||||
state.isLogin = true;
|
||||
alert('登录成功');
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 去注销
|
||||
const doLogout = function() {
|
||||
ajax('/acc/logout', {}, function (res) {
|
||||
if(res.code === 200) {
|
||||
// 浏览器会自动清除 cookie 中的 token
|
||||
state.isLogin = false;
|
||||
alert('注销成功');
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,28 @@
|
||||
import axios from 'axios'
|
||||
|
||||
// 后端服务地址 (在 Cookie 版跨域模式中，此处应该是一个 https 地址)
|
||||
// export const baseUrl = "http://localhost:8081";
|
||||
export const baseUrl = "https://20e331r221.yicp.fun";
|
||||
|
||||
|
||||
// 封装一下 Ajax 方法
|
||||
export const ajax = function(path, data, successFn) {
|
||||
axios({
|
||||
url: baseUrl + path,
|
||||
method: 'post',
|
||||
data: data,
|
||||
// 重点：开启第三方 Cookie
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
}).
|
||||
then(function (response) { // 成功时执行
|
||||
const res = response.data;
|
||||
successFn(res);
|
||||
}).
|
||||
catch(function (error) {
|
||||
return alert("异常：" + JSON.stringify(error));
|
||||
})
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()]
|
||||
})
|
||||
@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title> Sa-Token 跨域测试 - Header 参数版，h5 页面 </title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="text-align: center; padding-top: 200px;">
|
||||
<h2> Sa-Token 跨域测试 - Header 参数版，h5 页面 </h2>
|
||||
<p>当前是否登录：<b class="is-login"></b></p>
|
||||
<p>
|
||||
<a href="javascript: doLogin();">登录</a>
|
||||
<a href="javascript: doLogout();">注销</a>
|
||||
</p>
|
||||
</div>
|
||||
<script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
|
||||
<script src="./method-util.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// 查询当前会话是否登录
|
||||
function isLogin() {
|
||||
ajax('/acc/isLogin', {}, function (res) {
|
||||
$('.is-login').html(res.data + '');
|
||||
})
|
||||
}
|
||||
isLogin();
|
||||
|
||||
// 去登录
|
||||
function doLogin() {
|
||||
const param = {
|
||||
name: "zhang",
|
||||
pwd: "123456"
|
||||
}
|
||||
ajax('/acc/doLogin', param, function (res) {
|
||||
if(res.code === 200) {
|
||||
// 保存 token
|
||||
localStorage.satoken = res.token;
|
||||
$('.is-login').html('true');
|
||||
alert('登录成功，token是：' + res.token);
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 去注销
|
||||
function doLogout() {
|
||||
ajax('/acc/logout', {}, function (res) {
|
||||
if(res.code === 200) {
|
||||
// 清除 token
|
||||
localStorage.removeItem('satoken');
|
||||
$('.is-login').html('false');
|
||||
alert('注销成功');
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,23 @@
|
||||
|
||||
// 后端服务地址
|
||||
var baseUrl = "http://localhost:8081";
|
||||
|
||||
// 封装一下 Ajax 方法
|
||||
var ajax = function(path, data, successFn) {
|
||||
$.ajax({
|
||||
url: baseUrl + path,
|
||||
type: "post",
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
headers: {
|
||||
"X-Requested-With": "XMLHttpRequest",
|
||||
"satoken": localStorage.getItem("satoken")
|
||||
},
|
||||
success: function(res){
|
||||
successFn(res);
|
||||
},
|
||||
error: function(xhr, type, errorThrown){
|
||||
return alert("异常：" + JSON.stringify(xhr));
|
||||
}
|
||||
});
|
||||
}
|
||||
12
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-header-server/.gitignore
vendored
Normal file
12
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-header-server/.gitignore
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
target/
|
||||
|
||||
node_modules/
|
||||
bin/
|
||||
.settings/
|
||||
unpackage/
|
||||
.classpath
|
||||
.project
|
||||
|
||||
.idea/
|
||||
|
||||
.factorypath
|
||||
@ -0,0 +1,42 @@
|
||||
<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>sa-token-demo-cross-header-server</artifactId>
|
||||
<version>0.0.1-SNAPSHOT</version>
|
||||
|
||||
<!-- SpringBoot -->
|
||||
<parent>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-parent</artifactId>
|
||||
<version>2.5.15</version>
|
||||
<relativePath/>
|
||||
</parent>
|
||||
|
||||
<!-- 定义 Sa-Token 版本号 -->
|
||||
<properties>
|
||||
<sa-token.version>1.34.1</sa-token.version>
|
||||
<java.run.main.class>com.pj.SaTokenCrossHeaderApplication</java.run.main.class>
|
||||
</properties>
|
||||
|
||||
<dependencies>
|
||||
|
||||
<!-- SpringBoot依赖 -->
|
||||
<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>
|
||||
|
||||
</dependencies>
|
||||
|
||||
|
||||
|
||||
</project>
|
||||
@ -0,0 +1,21 @@
|
||||
package com.pj;
|
||||
|
||||
import cn.dev33.satoken.SaManager;
|
||||
import org.springframework.boot.SpringApplication;
|
||||
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||
|
||||
|
||||
/**
|
||||
* Sa-Token 跨域测试（header参数版）
|
||||
* @author click33
|
||||
*/
|
||||
@SpringBootApplication
|
||||
public class SaTokenCrossHeaderApplication {
|
||||
|
||||
public static void main(String[] args) {
|
||||
SpringApplication.run(SaTokenCrossHeaderApplication.class, args);
|
||||
System.out.println("\n启动成功，Sa-Token 配置如下：" + SaManager.getConfig());
|
||||
System.out.println("\n后端地址使用 http://localhost 访问，前端页面用 http://127.0.0.1 访问");
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
package com.pj.test;
|
||||
|
||||
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("/acc/")
|
||||
public class LoginController {
|
||||
|
||||
// 登录 ---- http://localhost:8081/acc/doLogin?name=zhang&pwd=123456
|
||||
@RequestMapping("doLogin")
|
||||
public SaResult doLogin(String name, String pwd) {
|
||||
if("zhang".equals(name) && "123456".equals(pwd)) {
|
||||
StpUtil.login(10001);
|
||||
// 要点：通过请求响应体返回 token 信息
|
||||
return SaResult.ok("登录成功").set("token", StpUtil.getTokenValue());
|
||||
}
|
||||
return SaResult.error("登录失败");
|
||||
}
|
||||
|
||||
// 注销 ---- http://localhost:8081/acc/logout
|
||||
@RequestMapping("logout")
|
||||
public SaResult logout() {
|
||||
StpUtil.logout();
|
||||
return SaResult.ok();
|
||||
}
|
||||
|
||||
// 查询登录状态 ---- http://localhost:8081/acc/isLogin
|
||||
@RequestMapping("isLogin")
|
||||
public SaResult isLogin() {
|
||||
boolean isLogin = StpUtil.isLogin();
|
||||
System.out.println("当前会话是否登录：" + isLogin);
|
||||
return SaResult.data(isLogin);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
package com.pj.test;
|
||||
|
||||
import cn.dev33.satoken.SaManager;
|
||||
import cn.dev33.satoken.context.SaHolder;
|
||||
import cn.dev33.satoken.filter.SaServletFilter;
|
||||
import cn.dev33.satoken.interceptor.SaInterceptor;
|
||||
import cn.dev33.satoken.router.SaHttpMethod;
|
||||
import cn.dev33.satoken.router.SaRouter;
|
||||
import cn.dev33.satoken.stp.StpUtil;
|
||||
import cn.dev33.satoken.util.SaResult;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
|
||||
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
|
||||
|
||||
|
||||
/**
|
||||
* [Sa-Token 权限认证] 配置类
|
||||
* @author click33
|
||||
*
|
||||
*/
|
||||
@Configuration
|
||||
public class SaTokenConfigure implements WebMvcConfigurer {
|
||||
|
||||
/**
|
||||
* 注册 [Sa-Token 全局过滤器]
|
||||
*/
|
||||
@Bean
|
||||
public SaServletFilter getSaServletFilter() {
|
||||
return new SaServletFilter()
|
||||
|
||||
// 指定 [拦截路由] 与 [放行路由]
|
||||
.addInclude("/**").addExclude("/favicon.ico")
|
||||
|
||||
// 认证函数: 每次请求执行
|
||||
.setAuth(obj -> {
|
||||
SaManager.getLog().debug("----- 请求path={} 提交token={}", SaHolder.getRequest().getRequestPath(), StpUtil.getTokenValue());
|
||||
// ...
|
||||
})
|
||||
|
||||
// 异常处理函数：每次认证函数发生异常时执行此函数
|
||||
.setError(e -> {
|
||||
return SaResult.error(e.getMessage());
|
||||
})
|
||||
|
||||
// 前置函数：在每次认证函数之前执行
|
||||
.setBeforeAuth(obj -> {
|
||||
SaHolder.getResponse()
|
||||
|
||||
// ---------- 设置跨域响应头 ----------
|
||||
// 允许指定域访问跨域资源
|
||||
.setHeader("Access-Control-Allow-Origin", "*")
|
||||
// 允许所有请求方式
|
||||
.setHeader("Access-Control-Allow-Methods", "*")
|
||||
// 有效时间
|
||||
.setHeader("Access-Control-Max-Age", "3600")
|
||||
// 允许的header参数
|
||||
.setHeader("Access-Control-Allow-Headers", "*");
|
||||
|
||||
// 如果是预检请求，则立即返回到前端
|
||||
SaRouter.match(SaHttpMethod.OPTIONS)
|
||||
.free(r -> System.out.println("--------OPTIONS预检请求，不做处理"))
|
||||
.back();
|
||||
})
|
||||
;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
# 端口
|
||||
server:
|
||||
port: 8081
|
||||
|
||||
sa-token:
|
||||
is-log: true
|
||||
24
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-header-vue3/.gitignore
vendored
Normal file
24
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-header-vue3/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,20 @@
|
||||
# Sa-Token 跨域测试 - Header 参数版，vue3 页面
|
||||
|
||||
在线文档：[https://sa-token.cc/](https://sa-token.cc/)
|
||||
|
||||
|
||||
## 运行
|
||||
先安装依赖
|
||||
``` bat
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
运行
|
||||
``` bat
|
||||
npm run dev
|
||||
```
|
||||
|
||||
打包
|
||||
``` bat
|
||||
npm run build
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title> Sa-Token 跨域测试 - Header 参数版，vue3 页面 </title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1362
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-header-vue3/package-lock.json
generated
Normal file
1362
sa-token-demo/sa-token-demo-cross/sa-token-demo-cross-header-vue3/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "sa-token-demo-cross-header-vue3",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.1.3",
|
||||
"vue": "^3.2.41",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"vite": "^3.2.7"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After 
(image error) Size: 1.5 KiB |
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After 
(image error) Size: 496 B |
@ -0,0 +1,14 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
// createApp
|
||||
const app = createApp(App);
|
||||
|
||||
// 安装 vue-router
|
||||
import router from './router';
|
||||
app.use(router);
|
||||
|
||||
|
||||
|
||||
// 绑定dom
|
||||
app.mount('#app');
|
||||
@ -0,0 +1,25 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||
|
||||
/**
|
||||
* 创建 vue-router 实例
|
||||
*/
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
// 首页
|
||||
{
|
||||
name: 'index',
|
||||
path: "/index",
|
||||
component: () => import('../views/index.vue'),
|
||||
},
|
||||
|
||||
// 访问 / 时自动重定向到 /index
|
||||
{
|
||||
path: "/",
|
||||
redirect: '/index'
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
// 导出
|
||||
export default router;
|
||||
@ -0,0 +1,65 @@
|
||||
<!-- 项目首页 -->
|
||||
<template>
|
||||
<div style="text-align: center; padding-top: 200px;">
|
||||
<h2> Sa-Token 跨域测试-header参数版，vue3 页面 </h2>
|
||||
<p>当前是否登录：<b>{{ state.isLogin }}</b></p>
|
||||
<p>
|
||||
<a href="javascript:;" @click="doLogin">登录</a>
|
||||
<a href="javascript:;" @click="doLogout">注销</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import { ajax } from './method-util.js'
|
||||
|
||||
// 是否登录
|
||||
const state = reactive({
|
||||
isLogin: false
|
||||
})
|
||||
|
||||
onMounted(function(){
|
||||
isLogin();
|
||||
})
|
||||
|
||||
// 查询当前会话是否登录
|
||||
const isLogin = function() {
|
||||
ajax('/acc/isLogin', {}, function (res) {
|
||||
state.isLogin = res.data;
|
||||
})
|
||||
}
|
||||
|
||||
// 去登录
|
||||
const doLogin = function() {
|
||||
const param = {
|
||||
name: "zhang",
|
||||
pwd: "123456"
|
||||
}
|
||||
ajax('/acc/doLogin', param, function (res) {
|
||||
if(res.code === 200) {
|
||||
// 保存 token
|
||||
localStorage.satoken = res.token;
|
||||
state.isLogin = true;
|
||||
alert('登录成功，token是：' + res.token);
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 去注销
|
||||
const doLogout = function() {
|
||||
ajax('/acc/logout', {}, function (res) {
|
||||
if(res.code === 200) {
|
||||
// 清除 token
|
||||
localStorage.removeItem('satoken');
|
||||
state.isLogin = false;
|
||||
alert('注销成功');
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,25 @@
|
||||
import axios from 'axios'
|
||||
|
||||
// 后端服务地址
|
||||
export const baseUrl = "http://localhost:8081";
|
||||
|
||||
// 封装一下 Ajax 方法
|
||||
export const ajax = function(path, data, successFn) {
|
||||
axios({
|
||||
url: baseUrl + path,
|
||||
method: 'post',
|
||||
data: data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
"satoken": localStorage.getItem("satoken")
|
||||
}
|
||||
}).
|
||||
then(function (response) { // 成功时执行
|
||||
const res = response.data;
|
||||
successFn(res);
|
||||
}).
|
||||
catch(function (error) {
|
||||
return alert("异常：" + JSON.stringify(error));
|
||||
})
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()]
|
||||
})
|
||||
@ -237,6 +237,13 @@ Maven依赖一直无法加载成功？[参考解决方案](https://sa-token.cc/d
|
||||
├── sa-token-demo-oauth2 // [示例] Sa-Token 集成 OAuth2.0
|
||||
├── sa-token-demo-oauth2-server // [示例] Sa-Token 集成 OAuth2.0 (服务端)
|
||||
├── sa-token-demo-oauth2-client // [示例] Sa-Token 集成 OAuth2.0 (客户端)
|
||||
├── sa-token-demo-cross // [示例] Sa-Token 跨域示例
|
||||
├── sa-token-demo-cross-header-server // [示例] Sa-Token 跨域测试 - Header 参数版，后端接口
|
||||
├── sa-token-demo-cross-header-h5 // [示例] Sa-Token 跨域测试 - Header 参数版，h5 页面（jquery请求）
|
||||
├── sa-token-demo-cross-header-vue3 // [示例] Sa-Token 跨域测试 - Header 参数版，vue3 页面
|
||||
├── sa-token-demo-cross-cookie-server // [示例] Sa-Token 跨域测试 - 第三方 Cookie 版，后端接口
|
||||
├── sa-token-demo-cross-cookie-h5 // [示例] Sa-Token 跨域测试 - 第三方 Cookie 版，h5 页面（jquery请求）
|
||||
├── sa-token-demo-cross-cookie-vue3 // [示例] Sa-Token 跨域测试 - 第三方 Cookie 版，vue3 页面
|
||||
├── sa-token-demo-dubbo // [示例] Sa-Token 集成 dubbo
|
||||
├── sa-token-demo-dubbo-consumer // [示例] Sa-Token 集成 dubbo 鉴权，消费端（调用端）
|
||||
├── sa-token-demo-dubbo-provider // [示例] Sa-Token 集成 dubbo 鉴权，生产端（被调用端）
|
||||
|
||||
Loading…
Reference in New Issue
Block a user