使用cube-ui、$store和tokenLogin.vue//Login.vue
/cube-form>
分别设置model和schemamodel:{username:"",passwd:""},schema:{fields:[{type:"input",modelKey:"username",label:"userName",props:{placeholder:"请输入用户名"},rules:{//验证规则需要:true},trigger:"blur"},]}发起登录请求，Login.vuethis.$store.dispatch("login",this.model).then(success=>{}).catch(error=>{});loginaction,store.jsimportusfrom"./service/user";login({commit},模型){returnus.login(model).then(res=>{const{token}=res.data;if(token){localStorage.setItem("token",token);commit("setLoginState",true);returntrue;}returnfalse;});}Interfaceservice,service/user.jsimportaxiosfrom"axios";exportdefault{login(user){returnaxios.get（“/APi/login",{params:user});}};在vue.config.js中，模拟接口configureWebpack:{devServer:{before(app){app.get("/api/login",function(req,res){const{username,passwd}=req.query;console.log(username,passwd);if(username=="kaikeba"&&passwd=="123"){res.json({code:1,token:"jilei"});}else{res.status(401).json({code:0,message:"用户名或密码错误"});}});}}}http拦截器有token后，每次发送http请求时，必须加载header//interceptor.jsconstaxios=require("axios");exportdefaultfunction(){axios.interceptors.request.use(config=>{consttoken=localStorage.getItem('token')if(token){config.headers.token=token;}returnconfig;});}//enable,main.jsimportinterceptorfrom'./interceptor'interceptor();接口验证//mockinterface,vue.config.jsfunctionauth(req,res,next){if(req.headers.token){//authenticatednext()}else{res.sendStatus(401)}}app.get("/api/userinfo",auth,function(req,res){res.json({code:1,data:{name:"tom",age:20}});});http拦截器响应//interceptor.jsexportdefaultfunction(vm){//传入vue实例//...//响应拦截axios.interceptors.response.use(null,err=>{if(err.response.status===401){//空vuexandlocalstoragevm.$store.dispatch("logout");//跳转loginvm.$router.push("/login");}returnPromise.reject(err);});}token机制\服务结束，~/server/server.jsconstKoa=require("koa");constRouter=require("koa-router");constjwt=require("jsonwebtoken");constjwtAuth=require("koa-jwt");constsecret="这是一个秘密";constapp=newKoa();constrouter=newRouter();router.get("/api/login",asyncctx=>{const{username,passwd}=ctx.query;console.log(username,passwd);if(username=="kaikeba"&&passwd=="123"){//生成tokenconsttoken=jwt.sign({data:{name:"kaikeba"},//用户信息数据exp:Math.floor(Date.now()/1000)+60*60//过期时},secret);ctx.body={code:1,token};}else{ctx.status=401;ctx.body={code:0,message:"用户名或密码错误"};}});router.get("/api/userinfo",jwtAuth({secret}),asyncctx=>{ctx.body={code:1,data:{name:"jerry",age:20}};});app.use(router.routes());app.listen(3000);serverproxy,vue.config.jsdevServer:{//代理配置proxy:{"/api":{target:"http://127.0.0.1:3000/",changOrigin:true}},//before(app){...}}在拦截器处修改,interceptor.jsconfig.headers.Authorization='Bearer'+token;
