使用cookie或者localstorage做数据持久化及实现登录功能为什么数据要做持久化例如token、用户名和用户

为什么数据要做持久化

例如token、用户名和用户其他信息，当后端接口响应回来数据的时候，因为组件的封装，我们一般会将这些数据存放到vuex这个公共的数据存放区域，但是vuex存放的数据有一个问题，那就是一刷新数据就会消失。

所以，需要给这部分数据做一个数据持久化，通过cookie或者localstorage将数据保存至本地。第一次调用后端接口获取数据的同时将数据存放到本地，以后使用的时候再从本地拿出来使用，这样就解决了vuex刷新后数据就没了的问题。

数据持久化流程

后端接口响应回来需要做持久化的数据 ——> 将数据存放至vuex ——> 在vuex将数据存放至本地，用的时候从本地获取到并存放至变量中 ——> 直接使用该变量

使用cookie做数据持久化

安装依赖：vue-js-cookie

npm install js-cookie --save

封装

auth.js

import Cookies from 'js-cookie'
const TokenKey = 'token'

// 获取
tokenexport function getToken() {  
    return Cookies.get(TokenKey)
}

// 设置
tokenexport function setToken(token) {  
    return Cookies.set(TokenKey, token)
}

// 移除
tokenexport function removeToken() {  
    return Cookies.remove(TokenKey)
}

store/index.js （vuex，将数据存放到本地，获取本地存储token）

import Vue from 'vue'
import Vuex from 'vuex'
import {getToken, setToken, removeToken} from '../utils/auth'
Vue.use(Vuex)

export default new Vuex.Store({  
    state: {    
        token: getToken(),  
    },  
    mutations: {    
        setToken(state, token) {      
            setToken(token)    
        },    
        removeToken(state) {      
            state.token = null      
            removeToken()    
        },  
    },  
    actions: {},  
    modules: {}
})

// res是后端响应回来的数据
let tokenData = res.data.content
this.$store.commit ('setToken',tokenData)

使用localstorage做数据持久化

封装storage.js

// 对localstorage进行封装 保存token到本地存储localstorage
// JSON.parse('字符串')  ==> 对象// JSON.stringify('对象')  ==> 字符串
// 消除魔法字符串（抽出所有相同名字，放在变量里，改的时候好改，改一个地方就可以了）
const TOKEN_STR = 'tokenStr'

// 获取token对象
export const getToken = () => {  
    return JSON.parse(localStorage.getItem(TOKEN_STR))
}

/** 
* 保存token到本地localstorage 
* @param {object} tokenObj 
*/
export const setToken = (tokenObj) => {  
    // 把tokenObj这个对象，保存到localstorage中  
    localStorage.setItem(TOKEN_STR, JSON.stringify(tokenObj))
}

/** 
* 删除token 
*/
export const delToken = () => {  
    localStorage.removeItem(TOKEN_STR)
}

store/index.js （vuex，将数据存放到本地，获取本地存储token）

import Vue from 'vue'
import Vuex from 'vuex'
// 导入
import { setToken, getToken } from '../utils/storage.js'

Vue.use(Vuex)

// 将获取的数据写到state里
export default new Vuex.Store({
    state: {  
        token: {     
            token: getToken(),  
        }
    },
    mutations: {  
        setStateToken (state, data) {    
            state.token = data    
            // 将数据保存到本地localstorage    
            setToken(data)  
        }
    },
})

// res是后端响应回来的数据
let tokenData = res.data.content
this.$store.commit ('setStateToken',tokenData)

实现登录功能

上面已经拿到token，并且做了持久化，接下来实现登录功能。

axios请求拦截器或者响应拦截器拦截token

需求：

后端响应回来的状态码为1000，则未登录，跳至登陆页
后端响应回来的状态码为1002或者1003，则说明用户名或密码错误，登录失败
其他状态码，直接放行

状态码可以和后端约定，不固定。

src/utils/request.js（封装axios的地方）

// 响应拦截器
axios.interceptors.response.use(
    success => {  
        if (success.data.statusCode == 1000) {    
            router.replace('/login')    
            return success  
        } else if (success.data.statusCode == 1002 || success.data.statusCode == 1003) {    
            ElementUI.Message({      
                message: '用户名/密码错误',      
                type: 'error'    
            });    
            return success  
        } else {    
            return success  
        }
    }, 
    error => {  
        return Promise.reject(error)
    }
)

路由拦截器拦截判断token

需求：

有token，不能跳转至登陆页（如果访问登陆页，则跳入主页）
有token，跳转非登陆页的其他页面，放行
无token，去登陆页，放行
无token，不能去非登陆页的其他页面（如果访问，则跳入登陆页）

router.js

import { getToken } from '@/unit/auth'

router.beforeEach(async (to, from, next) => {  
    // 是否有token  
    const token = getToken();  
    
    if (token) {// 有token    
        // 有token跳登陆页，就给它到主页    
        if (to.path === '/login') {      
            next('/home')    
        } else {// 有token跳其他页，放行      
            next();    
        }  
    } else {// 没有token，去登陆页，放行    
        if (to.path === '/login') {      
            next();    
        } else {// 没有token，去其他页，强制跳到登陆页登录      
            next('/login')    
        }  
    }
});

login.vue (登录成功，跳转首页)

// res是后端响应回来的数据
if(res.data.code == 200){  
    this.$router.push('/home')  
    let tokenData = res.data.content  
    this.$store.commit ('setToken',tokenData)
}