前后台权限实践

前后台权限(注册、登录、token验证)实践

注册前端代码

//对话框注册按钮点击

clickRegisterConfirm(){

this.registerConfirm.onclick =async()=>{

//判断用户名密码是否填写

if(this.name.value&&this.password.value){

//将提交按钮隐藏处理,防止重复提交

this.registerConfirm.style.display ='none'

//接口参数

letqueryData = {

type:'post',

url:'/api/koa/permissions/register',

data:{

name:this.name.value,

password:this.password.value

}

};

try{

//请求接口

letres =await this.api(queryData);

res = JSON.parse(res);

//成功后相关交互处理

if(res.success&&res.data){

//将后台传来的token存在localStorage里面,方便token验证使用

localStorage.token = res.data;

this.loginBtn.style.display ='none';

this.registerBtn.style.display ='none';

this.personalBtn.style.display ='flex';

this.logoutBtn.style.display ='flex';

this.personalBtn.innerHTML =''+this.name.value+'';

this.resetDialog();

}else{

this.registerConfirm.style.display ='block';

alert(res.msg);

}

}catch(e) {

console.log(e);

}

}else{

alert('用户名密码似乎没填');

}

}

}

注册后台代码

//注册

permissions.register=asyncctx => {

//默认后台什么都没做

letresData = {success:,msg: msg.nothing};

//拿到前端传来的参数

letqueryData = {

name:ctx.request.body.name?ctx.request.body.name:'',

password:ctx.request.body.password?ctx.request.body.password:'',

}

//前端参数都存在

if(queryData.name&&queryData.password){

letsql1 =`SELECT name FROM login_tb WHERE name="$"`;

letsql2 =`INSERT INTO login_tb(name,password) VALUES('$','${md5(md5(md5(queryData.password)))}')`;

try{

letdata1 =awaitquery(sql1);

//先判断用户名是否存在

if(data1&&data1.length){//存在

resData = {

success:,

msg:msg.userExist

};

}else{//不存在

//创建一个新用户

letdata2 =awaitquery(sql2);

//读取证书的私钥,通过私钥加密token

letcert = fs.readFileSync('/var/ssl/privkey.pem');

//将用户名写入token里面,让前端验证token的时候可以直接获取用户名

lettokenData = jwt.sign(queryData.name,cert);

resData = {

success:1,

msg:msg.success,

data:tokenData//前端注册成功后得到一个token

};

}

}catch(e) {

resData = {

success:,

msg: msg.database

};

}

}else{

resData = {

success:,

msg: msg.front

};

}

//将结果传给前端

ctx.body= resData;

};

登录前端代码

//对话框登录按钮点击

clickLoginConfirm(){

this.loginConfirm.onclick =async()=>{

//判断用户名密码是否填写

if(this.name.value&&this.password.value){

//将提交按钮隐藏处理,防止重复提交

this.loginConfirm.style.display ='none';

//接口参数

letqueryData = {

type:'post',

url:'/api/koa/permissions/login',

data:{

name:this.name.value,

password:this.password.value

}

};

try{

letres =await this.api(queryData);

res = JSON.parse(res);

//成功后相关交互处理

if(res.success&&res.data){

//将后台传来的token存在localStorage里面,方便token验证使用

localStorage.token = res.data;

this.loginBtn.style.display ='none';

this.registerBtn.style.display ='none';

this.personalBtn.style.display ='flex';

this.logoutBtn.style.display ='flex';

this.personalBtn.innerHTML =''+this.name.value+'';

this.resetDialog();

}else{

this.loginConfirm.style.display ='block';

alert(res.msg);

}

}catch(e) {

console.log(e);

}

}else{

alert('用户名密码似乎没填');

}

}

}

登录后台代码

//登录

permissions.login=asyncctx => {

//默认后台什么都没做

letresData = {success:,msg: msg.nothing};

//拿到前端传来的参数

letqueryData = {

name:ctx.request.body.name?ctx.request.body.name:'',

password:ctx.request.body.password?ctx.request.body.password:'',

}

//前端参数都存在

if(queryData.name&&queryData.password){

letsql1 =`SELECT name FROM login_tb WHERE name="$" AND password="${md5(md5(md5(queryData.password)))}"`;

try{

letdata1 =awaitquery(sql1);

//先判断用户名是否存在

if(data1.length){//存在

//读取证书的私钥,通过私钥加密token

letcert = fs.readFileSync('/var/ssl/privkey.pem');

//将用户名写入token里面,让前端验证token的时候可以直接获取用户名

lettokenData = jwt.sign(queryData.name,cert);

resData = {

success:1,

msg:msg.success,

data:tokenData//前端注册成功后得到一个token

};

}else{//不存在

resData = {

success:,

msg:msg.userOrPasswordError

};

}

}catch(e) {

resData = {

success:,

msg: msg.database

};

}

}else{

resData = {

success:,

msg: msg.front

};

}

ctx.body= resData;

};

token验证前端代码

//token验证

asynctoken(){

//本地token是否存在

if(!localStorage.token)return;

//接口参数

letqueryData = {

type:'post',

url:'/api/koa/permissions/token',

data:{

token:localStorage.token

}

};

try{

//请求接口

letres =await this.api(queryData);

res = JSON.parse(res);

//token验证成功后相关交互处理

if(res.success&&res.data){

this.loginBtn.style.display ='none';

this.registerBtn.style.display ='none';

this.personalBtn.style.display ='flex';

this.logoutBtn.style.display ='flex';

this.personalBtn.innerHTML =''+res.data+'';

}

}catch(e) {

console.log(e);

}

}

token验证后端代码

//token验证

permissions.token=asyncctx => {

//默认后台什么都没做

letresData = {success:,msg: msg.nothing};

//拿到前端传来的参数

letqueryData = {

token:ctx.request.body.token?ctx.request.body.token:'',

}

//前端参数都存在

if(queryData.token){

try{

//读取证书的私钥,通过私钥解密token

letcert = fs.readFileSync('/var/ssl/privkey.pem');

//解密得到的值是之前存进去的用户名

letdata = jwt.verify(queryData.token,cert);

resData = {

success:1,

msg:msg.success,

data:data//解密成功得到用户名传给前端

};

}catch(e) {

resData = {

success:,

msg: msg.tokenError

};

}

}else{

resData = {

success:,

msg: msg.front

};

}

ctx.body= resData;

};

demo地址

https://www.ijilu.cn/