# UI鉴权登录

# 配置用户名密码

默认情况下是不配置用户名密码的。

如果需要可以通过以下配置开启用户名密码验证登录。

magic-api:
  security-config:
    username: admin # 登录用的用户名
    password: 123456 # 登录用的密码
1
2
3
4

# 多用户登录

如果需要配置多用户登录,则需要使用自定义鉴权的方式。

/**
 * 自定义用户名密码登录
 */
@Component  //注入到Spring容器中
public class CustomAuthorizationInterceptor implements AuthorizationInterceptor {

	/**
     * 配置是否需要登录
	 */
	@Override
	public boolean requireLogin() {
		return true;
	}

	/**
     * 根据Token获取User
	 */
	@Override
	public MagicUser getUserByToken(String token) throws MagicLoginException {
		if (判断token是否有效) {
			return magicUser;   // 从token中获取MagicUser对象
		}
		throw new MagicLoginException("token无效");
	}

	@Override
	public MagicUser login(String username, String password) throws MagicLoginException {
		// 根据实际情况进行修改,如查询数据库。。
		if("admin".equals(username) && "admin".equals(password)){
			// 登录成功后 构造MagicUser对象。
			return new MagicUser("1","admin","tokenvalue......");
        }
		throw new MagicLoginException("用户名或密码不正确");
	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 与自身应用集成

# 单独访问

对于需要单独访问的,需要将应用的权限校验对路径/magic/web/**放行,交给magic-api处理,其它无需配置

对于magic-api UI中对生成出的接口执行测试时,可能会被自身应用权限校验不通过。此时要么模拟测试时将Header携带上,要么对生成的接口进行放行,如果还需要校验,请使用另外两种方式。

# Vue方式

# 安装组件

npm install --save magic-editor或npm i --save magic-editor
1

# 引用组件

<template>
  <div id="app">
    <!-- 引入magic-editor组件 -->
    <magic-editor :config="config"/>
  </div>
</template>

<script>
// 引入组件
import MagicEditor from 'magic-editor'
// 引入样式
import 'magic-editor/dist/magic-editor.css'

export default {
  name: 'App',
  components: {
	MagicEditor
  },
  data(){
    return {
      config:{
        baseURL: 'http://localhost:9999/magic/web',    //配置后台服务
        serverURL: 'http://localhost:9999/',    //配置接口实际路径
        request: {
          beforeSend: function(config){
            // 如果是基于Cookie验证的,此处可以不配。
            config.headers.token = ...; // 此处自行获取Token
            return config;
          }
        } 
        // 其它配置请参考文档
      }
    }
  }
}
</script>

<style>
html,body,#app {
  width: 100%;
  height:100%;
  margin:0;
  padding:0
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# iframe方式

iframe引入方式与Vue类似

<iframe src="http://xxxx.xx/magic/web"></iframe>
<script>
    window.MAGIC_EDITOR_CONFIG = {
		request: {
			beforeSend: function(config){
			    // 如果是基于Cookie验证的,此处可以不配。
				config.headers.token = ...; // 此处自行获取Token
				return config;
			}
		}
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
上次更新: 8/29/2021, 8:57:58 AM
赞助商