js-cookie、Base64、token的使用、输入框记住密码的案例

以下操作都是在vue2.0中实现的

js-cookie

js-cookie是一个插件，要在项目中进行安装，npm install -S js-cookie
在需要使用的地方引入即可，import Cookies from 'js-cookie'
常用的api

• Cookies.set(key,value)创建一个cookie
• Cookies.get(key)获取cookie值

---

设置时效性
Cookies.set(key,value,{expires:number})
number为设置的时效性，单位是天，如果想设置其他具体的时间，我们可以这样操作

 		let seconds = 10
        let expires = new Date(new Date() + seconds * 1000)
        Cookies.set("user", "name", { expires: expires })

Base64

Base64是用来进行加密解密的操作的，同样使用的话，需要在项目中进行安装npm install --save js-base64
在需要使用的地方进行引入let Base64 = require('js-base64').Base64;

---

加密Base64.encode(context)
解密Base64.decode(context)

token

token相当于一个令牌，可以用于确定用户的身份，当用户登录时，后台会返回一个token值，这时可以将token值进行储存，后面进行请求时，可以带着token去进行请求

使用步骤，在后台返回token值时，可以将token值储存在cookie中，或者储存在vuex中，在请求拦截中，发送headers时，将token发送出去

个人理解如此，如果有误，大牛请指教哇

axios.interceptors.request.use(config=>{
    let token = Cookies.get("token")
    if(token){
    config.headers['Token']=token
    }
    return config
})

输入框记住密码案例

输入框记住密码：点击方框，当方框被选中时，将用户名和密码存入localStorage中。另外我们在进入这个页面时，就要查看缓存中是否有用户名和密码，如果有，那么方框就是被选中的状态，并且将用户名和密码输入到输入框中

<template>
    <div class="setPage">
        用户名：<el-input placeholder="请输入内容" v-model="userInfo.user" clearable>
        </el-input>
        <br>
        密码：<el-input placeholder="请输入密码" v-model="userInfo.password" show-password></el-input>
        <br>
        <el-checkbox v-model="checked">记住密码</el-checkbox>
    </div>
</template>
<script>
let Base64 = require('js-base64').Base64
export default {
    data() {
        return {
            userInfo: {
                user: '',
                password: ''
            },
            checked: false
        }
    },
    watch: {
        checked(newVal) {  // 监听checked值
            if (newVal) {
                localStorage.setItem("rememberUserInfo", Base64.encode(JSON.stringify(this.userInfo)))  // 如果是选中状态，将userInfo进行存储，缓存中只可以放字符串类型
            }
        }
    },
    created() {
        if (localStorage.getItem('rememberUserInfo')) {  // 判断缓存中是否有用户信息，如果有就进行渲染
            this.checked = true
            this.userInfo = JSON.parse(Base64.decode(localStorage.getItem("rememberUserInfo"))) // 先解密再将其转换成对象形式
        }
    },
}
</script>