登陆后往cookie里写东西_zbootadmin系列（十一）之vue登陆认证

点击上方 蓝字关注我们

                                

  大家好，我是小z,上一篇给大家带来了axios的配置教程，今天给大家带来一篇登陆获取token的教程。废话不多说，下面进入正题。

No.1

       首先我们先聊聊什么是token,token是服务器生成的一个字符串，是客户端发出请求的令牌，当我们第一次登陆后，客户端从服务器拿到token后保存起来，以后再需要访问后端服务的话，直接带上token，服务器会根据token来校验token。

      其中的好处之一就是减少了对数据库的不必要的io操作，减缓服务器的压力。

No.2

          接下来就是如何获取服务器端的token，以及如何存储了。

            1.通过登陆页面调用登陆接口，这部分用到了vuex相关知识，读者们不必过多关注，后续会有相关教程的文章哈，目前只需要了解如何得到以及如何存储就可以了。

  // 登录    Login({ commit }, userInfo) {      return new Promise((resolve, reject) => {        login(userInfo).then(res => {          let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");          if (!reg.test(res.data))  {            setToken(res.data);            commit('SET_TOKEN', res.data);          }          resolve(res.data)        }).catch(error => {          reject(error)        })      })    },

         通过上述方法我们就获取到了从后端返回的token，然后我们调用setToken方法将token放到cookie里，调用commit方法把token存储到vuex里。这里的cookie我使用了js-cookie,安装很简单，使用npm安装即可。以下是我的js-cookie。

  import Cookies from 'js-cookie'const TokenKey = 'Zboot-Token'export function getToken() {  return Cookies.get(TokenKey)}export function setToken(token) {  return Cookies.set(TokenKey, token)}export function removeToken() {  return Cookies.remove(TokenKey)}

这样我们在每次在发送请求的时候都会从cookie里获取token，来校验用户的合法性。

  // request拦截器service.interceptors.request.use(  config => {    if (getToken()) {      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改    }    return config  },  error => {    console.log(error);    Promise.reject(error)  });

在上一篇文章中zboot-admin系列(十)之前端axios配置，我们在axios里已经做了配置，在客户端发出请求的时候，所有请求都会进入request拦截里，从cookie里获取token，后端的spring security会进行token的认证，认证后返回结果集。前端根据不同的结果集返回不同的信息给用户。

No.3

    简单的小结下，登陆认证的功能就是获取后端的token,保存至客户端，客户端每次带着token进行请求，服务器根据token进行验证。

    好了，今天的文章就介绍这么多，如果想得到zboot-admin源码的话，请在公众号回复zboot，可得到源码。zboot-admin最近还会更新的功能，相应的教程都会在公众发布哦。

    最后还望大家帮忙点个再看，小z就心满意足了 祝大家周末愉快

                                

让我知道你在看