vue 前端显示图片加token_手摸手，带你用vue撸后台 系列二(登录权限篇)

完整项目地址：vue-element-admin

https://github.com/PanJiaChen/vue-element-admin

前言

拖更有点严重，过了半个月才写了第二篇教程。无奈自己是一个业务猿，每天被我司的产品虐的死去活来，之前又病了一下休息了几天，大家见谅。

进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。这里先简单说一下，我实现登录和权限验证的思路。

• 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后(我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态)，前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限，用户名等等信息)。
• 权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。

上述所有的数据和操作都是通过vuex全局管理控制的。(补充说明：刷新页面后 vuex的内容也会丢失，所以需要重复上述的那些操作)接下来，我们一起手摸手一步一步实现这个系统。

登录篇

首先我们不管什么权限，来实现最基础的登录功能。

随便找一个空白页面撸上两个input的框，一个是登录账号，一个是登录密码。再放置一个登录按钮。我们将登录按钮上绑上click事件，点击登录之后向服务端提交账号和密码进行验证。 这就是一个最简单的登录页面。如果你觉得还要写的更加完美点，你可以在向服务端提交之前对账号和密码做一次简单的校验。详细代码

click事件触发登录操作:

this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {  this.$router.push({ path: '/' }); //登录成功之后重定向到首页}).catch(err => {  this.$message.error(err); //登录失败提示错误});复制代码

action:

LoginByUsername({ commit }, userInfo) {  const username = userInfo.username.trim()  return new Promise((resolve, reject) => {    loginByUsername(username, userInfo.password).then(response => {      const data = response.data      Cookies.set('Token', response.data.token) //登录成功后将token存储在cookie之中      commit('SET_TOKEN', data.token)      resolve()    }).catch(error => {      reject(error)    });  });}复制代码

登录成功后，服务端会返回一个 token(该token的是一个能唯一标示用户身份的一个key)，之后我们将token存储在本地cookie之中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。

ps:为了保证安全性，我司现在后台所有token有效期(Expires/Max-Age)都是Session，就是当浏览器关闭了就丢失了。重新打开浏览器都需要重新登录验证，后端也会在每周固定一个时间点重新刷新token，让后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。

获取用户信息

用户登录成功之后，我们会在全局钩子router.beforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了

//router.beforeEachif (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息  store.dispatch('GetInfo').then(res => { // 拉取user_info    const roles = res.data.role;    next();//resolve 钩子  })复制代码

就如前面所说的，我只在本地存储了一个用户的token，并没有存储别的用户信息(如用户权限，用户名，用户头像等)。有些人会问为什么不把一些其它的用户信息也存一下？主要出于如下的考虑：

假设我把用户权限和用户名也存在了本地，但我这时候用另一台电脑登录修改了自己的用户名，之后再用这台存有之前用户信息的电脑登录，它默认会去读取本地 cookie 中的名字，并不会去拉去新的用户信息。

所以现在的策略是：页面会先从 cookie 中查看是否存有 token，没有，就走一遍上一部分的流程重新登录，如果有token,就会把这个 token 返给后端去拉取us