vue项目将token存在（vuex）store和localstorage中

原创

已于 2022-06-08 10:26:13 修改 · 置顶 · 2.3w 阅读

240

标签

#vue #javascript #前端

于 2020-02-19 23:58:14 首次发布

本文详细介绍Token在Vue项目中的应用流程，包括Token的引入背景、准备工作、存储方式、Vuex管理、请求拦截器的设置，以及登录页面的实际使用案例。

文章目录

适合小白 ❤

一、准备工作和token

1、准备工作

了解（session，cookie）token
Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。
token 是在服务端产生的一串字符串，以作客户端进行请求的一个令牌。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化（比如存入数据库），那它就是一个永久的身份令牌（除非设置了有效期）。
token 优点
Token 完全由应用管理，所以它可以避开同源策略
Token 可以避免 CSRF 攻击
Token 可以是无状态的，可以在多个服务间共享
减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
安装vuex
cnpm install vuex --save

2、介绍token用法

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
————————————————
版权声明：本文为CSDN博主「sleepwalker_1992」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sleepwalker_1992/article/details/82974703

二、创建storage，store，request

1、src目录：

在这里插入图片描述
注：

封装storage是可选的，不封装就用原生的呗；创建store是必须的！
token一定要存在storage缓存中，否则刷新一下，store会重新被加载，token就没了；
那存在store是不是多余了，这个也是为了数据统一管理吧，也是数据可视化，因为缓存中的数据代码中是看不见的~

2、封装storage（可选）

// 封装操作localstorage本地存储的方法  模块化

var storage = {
   
   
    set(key, value) {
   
   
        localStorage.setItem(key, JSON.stringify(value));
        // localStorage.key = value;
        // localStorage[key] = value;
    },
    get(key) {
   
   
        return JSON.parse(localStorage.getItem(key));
    },
    getForIndex(index) {
   
   
        return localStorage.key(index);
    },
    getKeys(){
   
   
        let items = this.getAll();
        let keys = [];
        for (let index=0;index<items.length;index++){
   
   
            keys.push(items[index].key);
        }
        return keys;
    },
    getLength() {
   
   
        return localStorage.length;
    },
    getSupport() {
   
   
        return (typeof (Storage) !== "undefined") ? true : false;
    },
    remove(key) {
   
   
        localStorage.removeItem(key);
    },
    removeAll() {
   
   
        localStorage.clear();
    },
    getAll() {
   
   
        let len = localStorage.length;  // 获取长度
        let arr = new Array(); // 定义数据集
        for (var i = 0; i < len; i++) {
   
   
            // 获取key 索引从0开始
            var getKey =

最低0.47元/天解锁文章