谷粒学苑第二章前端框架-2.1登录功能

一、vue-admin-template的config模块

vue-admin-template支持多环境，config配置模块提供了dev和prod两种环境。而BASE_API存储的是URL前部分，再拼接上controller的URL，即是完整的URL。修改为自己的协议://ip:port

二、vue-admin-template的src/store模块

vue-admin-template的store模块是用来做全局统一管理的，如登录token,用户信息，或者是一些全局个人偏好设置等。所以登录默认调用的是src/store/modules/user.js模块。

调用三个方法：Login(登录功能)，GetInfo(获取用户信息)，LogOut(登出)

Login:入参userInfo，并接收后台返回的token

GetInfo:入参state，并接收后台返回的roles,name,avatar。

所以后台的接口设计为Login(data中包含taoken)，GetInfo(data中包含roles,name,avatar)

三、vue-admin-template的src/api模块

src/store/modules/user.js引用的src/api/login.js中的方法。请求后台接口的方式(get,post,put,delete),以及后台的URL。与controller接口的URL保持一致。

 四、controller接口的设计

@RestController
@RequestMapping("/eduservice/user")
public class EduLoginController {
    @PostMapping("login")
    public Resault login(){
        return Resault.ok().data("token","admin");
    }
    @GetMapping("info")
    public Resault getInfo(){
        return Resault.ok().data("roles","admin")
                .data("name","admin")
                .data("avatar","https://image.baidu.com/");
    }
}

五、跨域问题

如果此时前后台启动服务，点击登录会报错"Access-Controll-Allow-Origin",此报错即为跨域问题。

跨域问题的产生：通过一个地址去访问另外一个地址，这个过程中如果有三个地方任何一个地方不一样即会产生跨域问题。

• 访问协议  http   https
• IP地址      192.168.1.1   172.11.11.11
• 端口号     9528     8001

六、跨域解决方式

（1）在后端接口controller添加注解

@RestController
@CrossOrigin
public class EduLoginController {
}

(2)使用网关解决

七、总结