token是一个用户信息的表示，在登录中将会从后端拿到token，然后用户才可以进行往后的一系列操作，比如会员，用户个人信息，数据记录等等都可以根据token拿到，而每次访问token接口又会造成没必要的请求，这时候就是下面将登录时的token保存在vuex中，

一. 利用vuex中store进行进行保存

代码如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {//状态从本地获取
    token: localStorage.getItem("token") || ''
  },
  //同步修改state里面的值
  mutations: { //包含更新多个state函数的对象
    SET_TOKEN:(state, token)=>{
      state.token = token
    }
  },
  //异步调用mutations里面的方法
  //contxt.commit 利用上下文触发mutations某个方法
  // vue代码里面 this.$store.dispatch触发action里面的定义的方法
  actions: { //包含多个对应事件回调函数的对象
  //context是对应上下文
    setToken(context,token){
      context.commit('SET_TOKEN',token)
    },
	//退出登录时清除token
    clearToken(context){
      context.commit('SET_TOKEN','')
    }

  },
  // getters包含多个getter计算属性函数的对象
  modules: {
  }
})

复制

二.在登录页面在登录成功后后端返回code=0，以及data也就是用户的登录状态码，然后我们将其data保存到vuex中。

1）后端传回数据如下图

2）我们在登录的请求方法中写如下代码

  methods: {
      

      // 异步登陆
      async login () {
        let result
          // 发送ajax请求密码登陆
          result = await loginApi(phone, pwd,captcha)
        // 根据结果数据处理
        if(result.data.code===0) {
       	//这里是将其返回的用户信息data赋值给token来保存到本地
          localStorage.setItem("token", result.data.data);
          //利用vuex进行存储，this.$store.dispatch触发vuex中action里面的定义的方法setToken
          this.$store.dispatch('setToken',result.data.data)
          // 去个人中心界面
          this.$router.replace('/personal')
        } else {
          // 显示新的图片验证码
          this.getCaptcha()
          // 显示警告提示
          console.log("登录失败");
        }
      },
复制

在这里我们就实现了token用户登录状态保存的步骤，下面我们利用向后端传token来获取用户信息并展示

三.在登录成功进入个人中心页面时，进行传token来同步获取用户信息，

1）此时需要在个人中心页面携带token向后端接口发送请求
复制

//用户信息接口
export const getUserInfo = (token)=>axios.get("/api/v1/pri/user/find_by_token",{
    params:{//请求头携带token传参，来获取后端对应用户信息（头像，名字等）
        "token":token
    }
})
复制

2）在个人信息页面展示信息，并且有退出登录按钮进行退出

<template>
<div>
 <p>{{ info.name }}</p>
  <button v-if="getToken !== ''" class="green" @click="signOut">
      退出登录
   </button>
</div>
</template>
<script>
import { getUserInfo } from "@/api/getData.js";
export default {
  data() {
    return {
      info: {},
    };
  },
	//computed会有缓存功能，强调于属性的获取
  computed: {
  //从vuex中获取token
    getToken() {
      return this.$store.state.token;
    },
  },

  methods: {
    //获取用户信息
    async getInfo() {
      try {
        const result = await getUserInfo(this.getToken);
        if (result.data.code === 0) {
          this.info = result.data.data;
        }
      } catch (error) {
        console.log(error);
      }
    },

    //退出登录
    async signOut() {
      this.$createDialog({
        type: "confirm",

        title: "确认退出吗?",

        confirmBtn: {
          text: "确定按钮",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消按钮",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          this.$createToast({
            type: "warn",
            time: 1000,
            txt: "退出成功",
          }).show(
            
            this.$store.dispatch("clearToken"),
            //清除token
            localStorage.removeItem("token"),
            //刷新页面
            location.reload() 
          );
        },
      }).show();
    },
  },

  mounted() {
    if (this.getToken) {
      this.getInfo();
    }
  },
};
</script>

复制

到这里登录保存token以及退出清除token就实现了，在其他需要token的组件中只需要继续获取到vuex的token就可以获取到用户的信息了

四，这里加一个前端使用node实现token传给前端的方式

• 首先安装jsonwebtoken,用来生成token

npm install jsonwebtoken@8.5.1
复制

-在登录路由接口文件中使用将加密好的token返回给客户端

var express = require('express');
var router = express.Router();
const jwt = require('jsonwebtoken') //引入
let token 
const salt = '@!$!@#%#@$#$@'  //设置token加密密钥
// 登录接口
router.post('/login', function (req, res) {
  (async function () {
    console.log(req.body);
    // 获取参数
    const { username, password } = req.body
    connection.query(`SELECT * FROM user where username='${username}'`, function (error, results, fields) {
      if (error) throw error;
      // 返回值
      console.log("返回用户信息", results);
     
      // 如果数据库没有该用户
      if (results.length <= 0) {
        res.send({ msg: '用户名未注册' })
        return
      }
      // 如果有，判断数据库参数与当前参数是否一致
      if (results[0].username !== username || results[0].password !== password) {
        res.send({ msg: '用户名或密码错误' })
        return
      }
      if (results.length > 0) {
        // 设置token,调用jsonwebtoken包提供的**sign()**方法，将用户的信息加密成JWT字符串，响应给客户端
        token = jwt.sign({ id: results[0].id, }, salt, { expiresIn: 100000 * 60 * 60 * 24 })
        req.headers['token'] = token
        let asd = {
          code: 0,
          msg: '登陆成功',
          token,
          data: results[0]
        }
        res.send(asd);
      }
    });
  }
  )()
});

复制

这样客户端就可以按照上面所讲的方式保存token并且实现长久登录啦!!!

• 既然讲到了express，那就把后端token校验也放在下面，用来校验客户端传递给接口的token。
• 在目录下新建utils文件夹->token.js文件
  
  token.js（用来接收前端发送请求时是否携带token，如果没有提示错误）

const jwt = require('jsonwebtoken')
const salt = '@!$!@#%#@$#$@' //加密

module.exports = function (req, res, next) {
  // 检查post的信息或者url查询参数或者头信息
  const token = req.body.token || req.query.token || req.headers['token']
  console.log(token,'asd');
  if (token) {
    // 解析token
    jwt.verify(token, salt, (err, decoded) => {
      if (err) {
        return res.send({
          code: 1,
          msg: 'token信息错误'
        })
      } else {
        // 如果没问题九八解码后得信息保存到请求中，供后面使用
        req.api_user = decoded
        next()
      }
    })
  } else {    
    // 如果没有token，返回错误信息
    res.send({
      code: 1,
      msg: '无效token'
    })
  }
}
复制

• 然后在app.js引入，并给对应路由添加token校验
  app.js文件

var usersRouter = require('./routes/users');//我的一个用户路由
const need_token = require('./utils/token') //引入
app.use(need_token, usersRouter);//给用户路由接口处添加token校验使用
复制

这样一个前后端token完整的传递方式及实现就全部完成了，小伙伴快去c+v！！！