Vue中如何实现登录功能及权限验证机制？

本文共计911个文字，预计阅读时间需要4分钟。

关键词：前后端分离、JWT、登录、权限验证

最近开发的一个小应用，需要用到Vue实现登录功能，并对不同路由设置权限。查阅了网上很多文章，发现讲解都是乱七八糟、七七八八的。感觉国内技术类文章普遍存在这种问题。

关键词：前后端分离、jwt、登录、权限验证

最近在做一个小应用，需要用到vue实现登录，以及给不同路由设置权限。在网上看了很多文章，讲的是乱七八糟。感叹国内技术类文章实在是差劲，抄来抄去。这篇文章就说说我最后是如何实现的。

前后端分离项目中，后端提供api接口给前端，使用jwt发放权限。

首先前端提供用户名和密码请求登录接口，后端验证之后返回给前端一个token，之后前端在请求需要权限的接口时携带这个token就可以了。

两个问题

现在面临两个问题，

首先vue中不同的路由有不同的权限，比如我要访问后台 /admin, 就需要先登录才行，而有的页面不需要登录。

第二个问题是，vue组件中使用axios请求后台服务时，不同的接口有不同的权限。

后端接口权限

先来解决第二个问题。vue不同组件都要用到axios，我们在全局为axios添加request和response的拦截器。

也就是，在发起请求之前，先检测header是否携带token信息。在接收响应之前，先查看后端返回状态码，如果说需要token验证就跳转到登录界面。