vue实现基本的登录权限模块

思路

登录是每个网站最基本的要求，这里我以vue-element-admin的框架作为基础，简单记录下，我对这模块的理解与思路，希望可以帮到各位！
首先，你需要明白你要做什么，所以，简单的思路过程是必不可少的，如下：

1. 当用户输入账号密码，点击登录后，前端会调用后端登录的接口；
2. 后端接受到用户的账号密码，验证是否正确，正确则向前端返回token；
3. 前端获取到token，将其存储在localStorage（或cookies）和vuex中，此时，前端可以再调用后端的获取客户信息的接口，保存在vuex中，便于提取和渲染需要个人信息的页面；并且进入到首页；
4. 在前端中，每次路由跳转，都会判断localStorage（或cookies）中是否有token，如果没有则返回登录页面，有则正常跳转到对应的页面；（这里则需要在全局使用 router.beforeEach）；
5. 当点击退出登录后，删除localStorage（或cookies）和vux中的token值，并返回到登录页面；
6. 在权限问题中，前端每次调用后端接口的请求头添加token；
7. 后端判断请求头中是否有token，有token并进行验证，成功则返回数据，失败则根据对应的状态码，处理不同的结果；（如token过期，或者没有权限，返回401）
8. 验证失败后，返回到登录页，清除token的信息；再次登录，前端将再调用后端的接口，在localStorage（或cookies）和vuex中保存token值；

这就是整体的基本思路，如果不知道自己要做什么，怎么知道要怎么做呢？所以这是必要的条件！

基本路由设置

在创建页面之前，先建路由：

//router文件夹下的index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
const router = new Router({
  routes: [ {
    path: '/dashboard',
    component: () => import('@/views/dashboard/index'),
    name: 'dashboard'
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    name: 'login'
  }, ]
  })
export default router;

登录页面

下面就是开始将我们的思路转化成代码了，一个登录页面是必须的；两个框一个按钮就搞定；直接上代码，详细可以看官方demo

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">

      <div class="title-container">
        <h3 class="title">Login Form</h3>
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="Username"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>

      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="Password"
            name="password"
            tabindex="2"
            autocomplete="on"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
            @keyup.enter.native="handleLogin"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-tooltip>

      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>

    </el-form>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
export default {
  name: 'Login',
  components: {},
  data () {
    return {
      loginForm: {
        username: 'admin',
        password: '111111'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur'],
        password: [{ required: true, trigger: 'blur']
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  mounted () {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  methods: {
    checkCapslock (e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    showPwd () {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/dashboard', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getOtherQuery (query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

看起来代码很多，其实多的只是验证的过程，只要的就是点击事件handleLogin()这个方法。

vuex登录操作

而上一步的操作，将传递到vuex中（路径/user）方法login，如下：

//调用后端登录的接口
import { login } from '@/api/user' 
// 引入设置或清除在cookies的token方法 
import { getToken, setToken, removeToken } from '@/utils/auth' 
import router, { resetRouter } from '@/router'
import Cookies from 'js-cookie'

const state = {
  token: getToken()
}

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  }
}

const actions = {
  // user login
  login ({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username, userpassword: password }).then(response => {
        console.log('我被点击了', response)
        if (response.data == null) {
          reject('验证失败，请重新登录。')
        }
        const data = {// 把respose里data值赋给token
          token: ''
        }
        data.token = response.data.token
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        const NameKey = 'Admin-Name'
        Cookies.set(NameKey, username)
        resolve()

        console.log(data.token)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // 获取用户信息
  //   getInfo ({ commit, state }) {
  //     return new Promise((resolve, reject) => {
  //       getInfo({ token: state.token, username: state.name }).then(response => {
  //         const { data } = response
  //         const name = data.username
  //         const role = []
  //         role.push(data.rolename)
  //         data.roles = role
  //         // 角色必须是非空数组
  //         if (!data.roles || data.roles.length <= 0) {
  //           // eslint-disable-next-line prefer-promise-reject-errors
  //           reject('此账号没有分配权限，请分配权限之后再进行登录!')
  //         }

  //         commit('SET_ROLES', data.roles)
  //         commit('SET_NAME', name)
  //         // commit('SET_INTRODUCTION', introduction)
  //         resolve(data)
  //       }).catch(error => {
  //         reject(error)
  //       })
  //     })
  //   }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

上面的代码中，将登录后的操作带上，基本的登录已经完成。

实现注销功能

下面我们完成注销的过程；在首页随意撸个退出按钮，带上点击logout事件；点击后，实现下面代码；

logout () {
      this.$store.dispatch('user/logout')
      this.$router.push('/login')
      this.$message({
        message: '退出成功',
        type: 'success',
        duration: 3 * 1000
      })
    }

没错，又需要传递到vuex中，将token值清除，则在此回到刚才的user.js中，添加注销和清除方法;

// user.js 中添加
  // 用户注销
  logout ({ commit, state }) {
    return new Promise((resolve, reject) => {
      commit('SET_TOKEN', '')
      //   commit('SET_ROLES', [])
      removeToken()
      resetRouter()
      resolve()
    })
  },

  // 移除token
  resetToken ({ commit }) {
    return new Promise(resolve => {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      resolve()
    })
  }

这边实现登录和注销的功能，你以为这就结束啦？还没，你会发现，浏览器退后，还是能进入你刚才退出的首页，这是为什么呢~~~

添加全局路由beforeEach

这就是在刚开始提到的，需要在添加全局路由判断，在demo中，作者把这判断放在了src中的permission.js中(你也可以在router中的index.js中引入)，这里我注释了大部分，添加了最基本的判断：
（NProgress 是一个顶部进度条的ui，需要通过npm下载）

import router from './router'
// import store from './store'
// import { Message } from 'element-ui'
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 进度条样式
import { getToken } from '@/utils/auth' // 从cookie获取token

// const whiteList = ['/login']

router.beforeEach((to, from, next) => {
// 路由跳转前拦截
  const token = getToken()
  if (!token && to.path !== '/login') {
    next({
      name: 'login'
    })
    NProgress.done()
  } else {
    next()
    NProgress.done()
  }
  // 登录之后即可获取token值
  // const hasToken = getToken()
  // console.log('.....', hasToken)
  // if (hasToken) {
  //   console.log('执行了----1', to.path)
  //   if (to.fullpath === '/login') {
  //     console.log('执行了')
  //     next({path: '/dashboard'})
  //   }
  // } else {
  //   console.log('.......')
  //   if (whiteList.indexOf(to.path) !== -1) {
  //     // 在免费登录白名单，直接去
  //     next()
  //   } else {
  //     // 没有访问权限的其他页面被重定向到登录页面。
  //     next(`/login?redirect=${to.path}`)
  //     // NProgress.done()
  //   }
  // }
})

到此简单的登录模块便完成了，后面的便是前端在请求头上添加token，设置请求拦截和响应拦截等方面，判断是否有权限返回数据等情况；这篇文章已经够长了，可以前往vue拦截器与api统一管理查看其他的方面。

总结

总结：说起来也难受，说出来也不怕大伙笑话，登录权限问题，请求拦截问题，对于新人的我，也是撸了一段时间，前一段时间还是头昏眼花的，不过好在有大佬们的文章，在此，致谢几位：大佬1，大佬2等其他遗忘的前辈。
文章若有什么错误，望不吝赐教，谢谢