vue admin template登录的问题

版本：3.8.0,将其改为本地登录

问题

后台登录接口尚未开发，为了不影响系统其他接口的开发和测试工作，将vue admin template改为本地登录。

解决方案：手动配置token，将登录相关的接口改为静态数据不请求后台接口

1. 将\src\store\modules\user.js中的Login、getInfo、logout方法改为如下内容

Login({ commit }) {
const data = {
'token': 'admin'
}
setToken(data.token)// 将token存储在cookie中
commit('SET_TOKEN', data.token)
},

GetInfo({ commit }) {
const data = {
'roles': [
'admin'
],
'name': 'admin',
'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
}
if (data.roles &&data.roles.length >0) { // 验证返回的roles是否是一个非空数组
    commit('SET_ROLES', data.roles)
  }
    commit('SET_NAME', data.name)
    commit('SET_AVATAR', data.avatar)
},

// 登出
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
    commit('SET_TOKEN', '')
    commit('SET_ROLES', [])
    removeToken()
    resolve()
  })
}

2. 修改\src\util\request.js

config.headers['token'] = getToken()

版本：4.4.0:实现登录功能，访问后台登录接口

解决方案

1. 后端登录接口相关如下：
   1. 登录接口

   @RestController
   // 解决跨域
   @CrossOrigin
   @RequestMapping("/admin/hosp")
   public class LoginController {
       //login
       @PostMapping("/login")
       public R login(){
           return R.ok()
                   .data("token","admin");
       }
   
   
       //info
       @GetMapping("/info")
       public R getInfo(){
           return    R.ok()
                   .data("roles","[admin]")
                   .data("name","admin")
                   .data("avatar","https://img03.sogoucdn.com/app/a/100520093/d71a6360ba8601ff-19264876bfd6a308-dfbd047d3bb4f2621f01d7ae18979b6e.jpg");
       }
   }
   

   2. 工具类如下

   @Data
   public class R {
       private Boolean success;
   
   
       private Integer code;
   
   
       private String message;
   
   
       private Map<String, Object> data = new HashMap<String, Object>();
   
       //把构造方法私有
       private R() {}
   
       //成功静态方法
       public static R ok() {
           R r = new R();
           r.setSuccess(true);
           r.setCode(ResultCode.SUCCESS);
           r.setMessage("成功");
           return r;
       }
   
       //失败静态方法
       public static R error() {
           R r = new R();
           r.setSuccess(false);
           r.setCode(ResultCode.ERROR);
           r.setMessage("失败");
           return r;
       }
   
       public R success(Boolean success){
           this.setSuccess(success);
           return this;
       }
   
       public R message(String message){
           this.setMessage(message);
           return this;
       }
   
       public R code(Integer code){
           this.setCode(code);
           return this;
       }
   
       public R data(String key, Object value){
           this.data.put(key, value);
           return this;
       }
   
       public R data(Map<String, Object> map){
           this.setData(map);
           return this;
       }
   }
   

   public class ResultCode {
       public  static  Integer SUCCESS = 20000;
       public  static  Integer ERROR = 20001;
   }
   

2. 前端模板更改如下：
   

错误码的修改需要和后台一致