在vue框架下使用vuex和token来完成登录验证功能：

token验证实现登录功能的原理：

1.第一次点击登录功能，将输入的密码以及用户名数据传入后端。（dispatch+axios.post）

2.后端接受之后，验证数据是否存在，若存在则返回一个token值。

3.将token值保存在cookie中，执行路由跳转。（都在actions中执行，cookie.set）

4.每次路由跳转，守卫导航会判断cookie中是否有token，如果有就跳转到对应页面，如果没有则进入登录页面。（beforeEach）

 

views/Login.vue中的onsubmit方法，将密码以及用户名数据提交到异步操作actions的Login方法中

methods: {
    onSubmit(values) {
      //console.log(values);
      this.$store.dispath("Login", values).then((res) => {
        this.$router.push("/home");
        alert("登录成功");
      });
    },
  },

在store/index.js中，Login内将传送的数据使用axios.post传送到后台获取token值，并且进行保存token，记录token状态，然后返回views/Login.vue中

进行路由跳转。

import { login } from "../../assets/api/login"
import cookie from "cookie_js"
const state = {
  token: ''
}
const getters = {
  token: state => state.token
}
const mutations = {
  SET_TOKEN(state, value) {
    state.token = value
  }
}
const actions = {
  Login({ commit }, values) {
    return new Promise((resolve, reject) => {
      login(values).then((res) => {
        cookie.set('admin', res.data.data.token)//保存token
        commit('SET_TOKEN', res.data.data.token)
        resolve()
      }).catch(err => {
        reject(err)
      })
    })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

import axios from "axios"
export function login(values) {
  return axios.post('', values);
}

验证token功能：在main.js文件中使用路由守卫全局范围的beforeEach，路由跳转时，判断cookie中是否存在token，存在则跳转功能正在进行，

                          如果token不存在，则判断跳转的路径是否为登录页面，若不是则跳转到登录页面。

const whiteRouter = ['/login'];
//路由守卫
router.beforeEach((to, from, next) => {
  console.log(to);
  if (cookie.get('admin')) {
    next();
  } else {
    if (whiteRouter.indexOf(to.path) !== -1) {
      next();
    } else {
      next('/login');
    }
  }
})

大致的功能的如上所述，作为前端新人，花费了我两三天的时间才把这个功能的逻辑以及相关的技术理清，虽忙碌却又充实。