[JavaScript知识库]Vue登录页的逻辑

登录功能

无论使用什么框架，简单登录功能的登录都是通过点击按钮+事件来实现的

我们关注的是事件做了什么事？

1. 发送携带数据的请求
2. 保存token
3. 页面跳转

一项项来完成

发送请求

发送请求使用的是axios

1.假设封装的函数为login,这里假设axios已经被引入了，

fucntion login(params)//params为登录页面的数据
return axios({
    url: '/login',
    method: 'get',
    data:params
  })

在这里要记住axios请求返回的参数是一个promise对象，最终可以
2.进入到拦截器，拦截器用于设置token头部

axios.interceptors.request.use(function(config){
if(store.getters.token){
config.headers={
'Authorization' : "Token " + getToken('Token')}
	}
},function(error){
Promise.reject(error)})

在这里发送的请求有的有token，有的没有token，但是无论有没有token都需要发送到后端，交由后端来处理是否有token的判断

3.响应拦截器的设置

响应拦截器要对状态码进行处理，比如说验证错误，还有token失效或者错误的设定。由于这一块的设定比较多就不做演示

4.回到登录页面

login(userinfo).then(res => {
							let userList = res.data.token;
							setToken("Token",token)
							this.$router.push({ path: '/' })
						})

由于返回的response是一个promise对象我们可以使用then方法进行处理

处理操作分为

1. 取出token然后存储在localstoreage或者sessionstorage中
2. 进行路由的跳转操作

这样一个简单的登录功能就实现了