vue-admin-template结合SpringBoot登录
前端请求分析
vue-admin-template登录接⼝请求详解
在Github拉项⽬下来运⾏，Chrome开发者模式调试登录接⼝
1. 点击Login按钮可以发现产⽣了如下两个请求
2. 点开Login请求，发现传⼊的是表单中的⽤户名和密码，返回的是⼀个"admin-token"
3. 点开info请求，传⼊的是前⾯的token，返回的是如下的信息
vue-admin-template登录接⼝代码详解
打开\src\views\login\index.vue，可以看到有⼀个handleLogin⽅法，专门⽤来处理登录校验的信息：
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({ path: direct || '/' })
this.loading = false
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
可以看到他dispatch到了'user/login'，我们到modeules\user.js地⽅：
这⾥有两个login⽅法，第⼀个⽅法是user.js中声明的，第⼆个⽅法可以在顶部看到是src⽬录下的api⽂件夹中的user.js引⼊进来的
1. 从api\users.js中引⼊
import { login, logout, getInfo } from '@/api/user'
2. ⾃⼰声明的
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: im(), password: password }).then(response => {
const { data } = response
// 调⽤SET_TOKEN⽅法，将返回值⾥的token设置到resp⾥
commit('SET_TOKEN', ken)
ken)
resolve()
}).catch(error => {
reject(error)
})
})
},
⾸先先分析本⽂件中的login，在分析之前，先讲⼀下什么是Promise
Promise是异步编程的⼀种解决⽅案，它有三种状态，分别是pending-进⾏中、resolved-已完成、rejected-已失败
当Promise的状态⼜pending转变为resolved或rejected时，会执⾏相应的⽅法，并且状态⼀旦改变，就⽆法再次改变状态，这也是它名字promise-承诺的由来
点开下⾯的这个login，可以看到实际上就是去了api中的那个login，所以我们进⼊了api\user.js，此时我们再点开这个request，可以发现他实际上就是封装了⼀个axios请求
import request from '@/utils/request'
export function login(data) {
return request({
url: '/vue-admin-template/user/login',
method: 'post',
data
})
}
// create an axios instance
const service = ate({
baseURL: v.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
看到这⾥也就不难明⽩转发(dispatch)的⽬的
1. 发送login请求获取到token值
2. 并存储到Vuex状态管理模式中，供多个组件同时识别使⽤
响应数据分析
数据的相应也在api/user.js中可以到
// response interceptor
sponse.use(
/**
* If you want to get http information such as headers or status
* Please return  response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (de !== 20000) {
Message({
message: ssage || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (de === 50008 || de === 50012 || de === 50014) {
// to re-login
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
})
})
}
ject(new ssage || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: ssage,
type: 'error',
duration: 5 * 1000
})
ject(error)
}
)
可以看到如果不是20000就代表了出错，此外50008、50012和50014是由特殊意义的错误编码
登录接⼝请求头详解
在项⽬的根⽬录下有fig.js
可以看到默认端⼝的设置
/
/ If your port is set to 80,
// use administrator privileges to execute the command line.
springboot和过滤器
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = v.port || v.npm_config_port || 9528 // dev port
然后打开.vironment，可以看到开发环境的配置：
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
上⾯可以看到之前的VUE_APP_BASE_API
我们要进⾏后端接⼝数据交互有时候需要改动这⾥
如何修改
1. 注释掉mock.js⽣成数据
2. open属性改为false，这⾥是为了编译启动项⽬时不要开两个⽹页
3. 如果改了open那么需要在package.json的启动命令中加上 --open（只在完成编译后才启动界⾯），其中2和3⾮必须
4. 另外需要改动的就是接⼝的地址
5. main.js注释掉mock⽣成数据
6. 重新编写Controller中的⽅法，可以看到已经从Spring Boot获取数据了
@Slf4j
@Controller
@RequestMapping(value = "/authentication")
public class AuthenticationController {
@CrossOrigin
@PostMapping(value = "/login")
@ResponseBody
public Map login() {
HashMap<String, Object> response = new HashMap<>();
HashMap<String, Object> responseData = new HashMap<>();
responseData.put("token", 1);
response.put("code", 20000);
response.put("msg", "登录成功");
response.put("data", responseData);
return response;
}
@CrossOrigin
@GetMapping(value = "/info")
@ResponseBody
public Map info() {
HashMap<String, Object> responseInfo = new HashMap<>();
HashMap<String, Object> responseData = new HashMap<>();
responseData.put("roles", "admin");
responseData.put("name", "Super admin");
responseData.put("avatar", "wpimg.wallstcn/f778738c-e4f8-4870-b634-56703b4acafe.gif");
responseInfo.put("code", 20000);
responseInfo.put("msg", "登录成功");
responseInfo.put("data", responseData);
return responseInfo;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。