@@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><code>【支持所有JWT】</code></div> <div class="card-body"> <div class="form-group"> <label>ToKen</label> <input v-model="txtToken" id="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> <code>【仅支持自带JWT】</code></div> <div class="card-body"> <div class="form-group"> <label>用户名</label> <input v-model="userName" class="form-control" type="text" name="role-input" placeholder="用户名"> </div> <div class="form-group"> <label>密码</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>结果:</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 class="card"> <div class="card-header"><h4>测试授权 <code>【仅支持自带JWT】</code></h4></div> <div class="card-body"> <div class="form-group"> <div class="alert alert-success">获取JWT信息</div> <div>Url: /api/rezero/getuserinfo </div> <button class="btn btn-primary m-t-10" @click="getUserInfo">确定</button> </div> <div class="form-group"> <label>结果:</label> <textarea rows="5" class="form-control">{{jwtInfo}}</textarea> <code>注意:如果成功,内置接口访问不了可能是 DisableSystemInterface 禁用了 </code> </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, jwtInfo: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("设置成功"); setTimeout(function () { window.location.href = "/rezero/Authorization.html"; }, 1000); } }, getToken: function () { if (!this.userName || !this.password) { tools.alert("用户名或者密码不能为空"); } else { axios.post("/api/rezero/token?supportCustomDto=true", { userName: this.userName, password: this.password+"" }, jwHeader) .then(response => { this.error = null; debugger 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 }); } } }, getUserInfo: function () { axios.get("/api/rezero/getuserinfo", jwHeader) .then(response => { this.error = null; this.jwtInfo = response.data; }) .catch(error => { this.error = error.message; this.data = null; }); } } }); </script>