K先生个人博客

当前位置:首页 > 爱技术 > 正文

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,多谢支持。

作者K先生本文地址http://www.gold404.cn/info/117

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表

    暂时还没有评论哦!