ReZero/SuperAPI/wwwroot/rezero/default_ui/authorization.html

@@master_page.html
<div id="apibox" class="col-lg-12">
    <div class="card">
        <div class="card-header"><h4>授权说明</h4></div>
        <div class="card-body">
            <div class="form-group">
                <div class="alert alert-success">一、用户表不存需要创建表</div>
                <p>  1、Json文件禁用授权 </p>
                <p>  2、实体管理创建【用户实体】,然后点同步生成【用户表】 </p>
                <p>  3、创建【用户插入接口】 </p>
                <p>  4、插入用户名密码(密码前端加密好) </p>
                <div class="alert alert-success">二、用户表存在只需四步</div>
                <p>  1、完成json配置启用授权 </p>
                <p>  2、输入用户名密码获取Token (密码前端加密好) </p>
                <p>  3、保存Token </p>
                <p>  4、其他页面能正常访问说明授权成功，未成功接口都是返回401 </p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header"><h4>保存登录</h4></div>
        <div class="card-body">
            <div class="form-group">
                <label for="example-text-input">ToKen</label>
                <input v-model="txtToken" class="form-control" type="text" name="role-input" placeholder="保存后请求都会加上Token">
            </div>

            <div class="form-group">
                <button type="button" @click="submitToken" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header"><h4>获取Token</h4></div>
        <div class="card-body">

            <div class="form-group">
                <label for="example-text-input">用户名</label>
                <input v-model="userName" class="form-control" type="text" name="role-input" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="example-text-input">密码</label>
                <input id="txtpassword" v-model="password" class="form-control" type="text" name="role-input" placeholder="前端加密好的密码">
                <button class="btn btn-xs btn-primary m-t-10" @click="MD5" >MD5</button> 
            </div>
            <div class="form-group">
                <label for="example-text-input">结果:</label>
                <textarea class="form-control">{{result}}</textarea>
            </div>
            <div class="form-group">
                <button type="button" @click="getToken" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
            </div>
        </div>
    </div>
</div>
<script src="js/crypto/core.js"></script>
<script src="js/crypto/md5.js"></script>
<script> 
    var vueObj = new Vue({
        el: '#apibox',
        data: {
            data: null,
            error: null,
            txtToken: null,
            userName: null,
            password: null,
            result: null,
            hashedPasswords: []  
        },
        mounted() {
            if (jwHeader && jwHeader.headers) {
                this.txtToken = (jwHeader.headers.Authorization + "")
                    .replace("Bearer null", "Bearer ")
                    .replace("Bearer ", "");
            }
        },
        methods: {
            submitToken: function () {
                if (!this.txtToken) {
                    tools.alert("token不能为空");
                } else {
                    localStorage["@@authorizationLocalStorageName"] = this.txtToken;
                    tools.alert("设置成功");
                }
            },
            getToken: function () {
                if (!this.userName || !this.password) {
                    tools.alert("用户名或者密码不能为空");
                } else {
                    axios.post("/api/rezero/token", { userName: this.userName, password: this.password }, jwHeader)
                        .then(response => {
                            this.error = null;
                            this.result = response.data;
                        })
                        .catch(error => {
                            this.error = error.message;
                            this.data = null;
                        });
                }
            },
            MD5: function ()
            {
                if (this.password) {
                    // No need to hash if password is already hashed
                    var existingHash = this.hashedPasswords.find(entry => entry.password === this.password);
                    if (!existingHash) {
                        var hashedPassword = CryptoJS.MD5(this.password);
                        this.password = hashedPassword;
                        this.hashedPasswords.push({ password: this.password, hashedPassword });
                    }
                }
            }
        }
    });
</script>