无论使用什么框架，简单登录功能的登录都是通过点击按钮+事件来实现的
我们关注的是事件做了什么事？
- 发送携带数据的请求保存token页面跳转
一项项来完成
发送请求发送请求使用的是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方法进行处理
处理操作分为
- 取出token然后存储在localstoreage或者sessionstorage中进行路由的跳转操作
这样一个简单的登录功能就实现了
