token + localstorage 验证登录(vue)详细教程

🚩概要

• token ：
  本质是验证身份的令牌，一般由用户通过账户密码登录后，服务端把这些凭证通过加密等一些列操作后得到的字符串。
• token 登录流程：
  • 客户端用账户密码请求登录；
  • 服务端接收请求，验证账户密码；
  • 验证成功后，服务端发送token给客户端；
  • 客户端接收到token后保存，可以存储于sessionstorage或localstorage；
  • 客户端每次请求，需要将携带token发送给服务端；
  • 服务端接收请求，验证token,验证成功则响应请求返回请求数据；
• token 验证优点：
  • token 存储于客户端，不会对服务端造成压力，即便是服务端集群，也不会增加维护成本；
  • token 在前端可以不保存于 Cookie 中，避免CSRF攻击，提升数据的安全性；
  • token 下发后，在有效期内长久生效，服务端想回收 token 权限非常困难；

✌️步骤：

1.demo构建

• 前端：采用 token + localStorage + vuex 做令牌存储验证，包含 axios 二次封装、路由守卫、api 模块化等操作；
• 后端：采用👉 mock.js 请求模拟，模拟登录接口测试数据获取等 ；
  通过vueCLI脚手架搭建，包含以下基本结构：

2.后端Mock

mock 文件夹下新建 index.js，编写登录与数据获取测试接口以便后面模拟请求调取，注意需要在 main.js 引入

const Mock = require('mockjs');

// 登录接口
Mock.mock('/login', 'post', (option) => {
   
   
  // 解析请求体 body 中数据
  let response = JSON.parse(option.body);
  return {
   
   
    status: 200,
    message: '请求成功',
    data: response,
    token: 'authorization-xxxxxx' // 模拟后端返回 token
  }
})

// 数据请求模拟
Mock.mock('/data','get',(option)=> {
   
   
  return {
   
   
    status: 200,
    message: "请求成功",
    data: [1,2,3,4,5]
  }
})

main.js

3、login.vue

<template>
  <div>
    <input type="text" v-model="form.username" placeholder="用户名">
    <input type="password" v-model="form.password" placeholder="密码">
    <button @click="login">登录</button>
  </div>
</template>
<script>
import {
     
      mapMutations } from 'vuex'
import {
     
      Login } from '../api/api.js'
export default {
     
     
  name: 'Login',
  data() {
     
     
    return {
     
     
      form: {
     
     
        username: '',
        password: ''
      }