vue项目实战之alone-admin（七）：实现基于token的登录验证

alone-admin项目一直在完善当中，尽管进度并不是太快，但一定会一直走下去的。我对alone-admin的期望就像刚开始的时候说的那样，让后端程序员通过修改配置文件添加对应的api接口就可以得到一个不太差的后台管理系统（现在好像距离期望还有点远......）。

首先，我会在这公布一下alone-admin所对接的接口文档，让对alone-admin有一点感兴趣的小伙伴能够更清晰的了解alone-admin项目。alone-admin接口文档地址：https://www.showdoc.com.cn/gold404?page_id=6402071297850224

参照这个接口文档，我们下面再聊一下alone-admin是怎么实现基于token的登录认证的。

一、准备好登录相关的接口

首先，我们在other/apis.js文件中导出与登录相关的接口：

export const login= params=>post('/login',params);
export const logout= params=>get('/logout');
export const adminInfo = params => get('/admin', params)

很简单，然后我们在我们的登录页面login.vue中，去请求这个登录接口就行，当然还要记得携带参数用户名和密码哦。当账户密码正确的时候，服务端会更我们返回一个token值，以后我们所用的接口请求都需要携带token噢。我们再获取到token值之后，我们把token存储到缓存中，下次请求其他接口时，我们就可以从缓存中直接获取该token值了。这一段代码，我在alone-admin中是这样写的：

login(this.form).then(res=>{
  if(res.error_code==0){
  localStorage.setItem('token',res.data.token)
  this.$message({
    message:'登录成功！欢迎您回来！',
    type:'success'
  })
  this.$router.push('/')
  }
})

这里面的登录成功信息提示使用了element-ui中的message。

二、注册全局路由守卫

前面我们已经通过登录接口获取到了token，那么我就是根据这个token来判断用户是否已经登录的。我们在router/index.js文件中注册全局路由守卫，代码如下：

router.beforeEach((to,from,next) =>{
	let token=localStorage.getItem('token');
	if(!token && to.name !='Login'){
		next('/login')
	}else if(!localStorage.getItem('adInfo') && token){
		adminInfo().then(res=>{
			localStorage.setItem('adInfo',JSON.stringify(res.data))
		}).catch(err=>{
			localStorage.setItem('adInfo','')
		})
		next();
	}else{
		next();
	}
})

这里解释一下，就是判断该页面是不是登录页面，如果不是登录页面，那么我们判断有没有token值，如果token值存在的话，我们再通过adminInfo接口去验证该token是否有效，如果该token有效的时候，才会被允许访问除登录页面外的其他页面。

看到这可能有细心的小伙伴会问，之前不是说每次请求都要携带token参数的吗，这为什么每次都没见啊？

不要急，这个token为了方便我们是直接写到封装的axios中了，找到other/request.js文件，看下面代码：

// 请求拦截器
instance.interceptors.request.use(function(config) {
	// 在发送请求之前做些什么
	var token = localStorage.getItem('token') || '';
	if (token){
		config.headers.common['Authorization'] ='Bearer '+token;
	}
	return config;
}, function(error) {
	// 对请求错误做些什么
	return Promise.reject(error);
});

我们在axios的请求之前将token放到了header中，至于为什么是'Bearer '+token，先理解成后台验证需求哈。还有一个adminInfo接口这里就不写了，只是注销登录用的接口，它会是当前token失效。

最后欢迎到GitHub上给个star，地址：https://github.com/pmb2020/alone-admin，多谢支持。