• vue中cookie的使用


    1.存放cookie
    import md5 from 'blueimp-md5'
    import cookie from 'js-cookie'
    import url from '../api/url.js'
    import http from '../api/http.js'
    // 每个input输入框的错误提示显示的条件:
    // 1.匹配当前输入框输入的内容是否满足格式限制(从输入前就已经在实时判断)
    // 2.是否打开错误提示--此为手动打开
    export default {
    data () {
    return {
    phone: null,
    password: null,
    phoneTips: false // 是否显示手机号验证错误提示
    }
    },
    computed: {
    phoneTest () {
    var reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
    return reg.test(this.phone)
    },
    target () {
    return this.$route.query.target
    }
    },
    methods: {
    clearPhone () {
    this.phone = ''
    this.phoneTips = ''
    },
    login () {
    if (!this.phoneTest) {
    this.phoneTips = true
    } else {
    http.post(url.login, {
    phone: this.phone,
    pwd: md5(this.phone + this.password)
    }).then(res => {
    cookie.set('sid', res.data.sid, { domain: 'localhost' })//domain:是存放的地址:如果是在本地运行的代码改为localhost,如果要放在线上运行要改为线上的网址eg:http:www.kongxianlc.com那么domain:'kongxianlc.com' (domain主要解决cookie跨域的问题)
    cookie.set('phone', res.data.phone, { domain: 'localhost' })
    this.$router.push(this.target || '/')
    console.log(this.phone)
    })
    }
    }
    }
    }
    2.使用cookie 获取
    import cookie from 'js-cookie'
    import url from '../api/url.js'
    import http from '../api/http.js'
    export default {
    data () {
    return {
    userPhone: null,
    subNav: false // 是否显示互动的二级菜单
    }
    },
    methods: {
    tabSubNav (bl) {
    this.subNav = bl
    },
    logout () {
    cookie.get('sid') && http.post(url.logout);
    (this.$route.matched[0].path === '/account') && this.$router.push('/')
    cookie.remove('sid', {domain: 'localhost'})//清除cookie,如果要放在线上运行要改为线上的网址eg:http:www.kongxianlc.com那么domain:'.kongxianlc.com'
       cookie.remove('phone', {domain: 'localhost'})
          this.userPhone = null
    window.$tips('账户退出成功')
    }
    },
    created () {
    this.userPhone = cookie.get('phone')//获取cookie
    // console.log(cookie.get('phone'))
    }
    }
     
  • 相关阅读:
    AntDesign(React)学习-9 Dva model reducer实践
    AntDesign(React)学习-8 Menu使用 切换框架页内容页面
    AntDesign(React)学习-7 Menu添加事件
    AntDesign(React)学习-6 Menu展示数据
    AntDesign(React)学习-5 路由及使用Layout布局
    AntDesign(React)学习-4 登录页面提交数据简单实现
    AntDesign(React)学习-3 React基础
    AntDesign(React)学习-2 第一个页面
    AntDesign(React)学习-1 创建环境
    正则表达式分组捕获非捕获的示例理解
  • 原文地址:https://www.cnblogs.com/wssdx/p/9960348.html
Copyright © 2020-2023  润新知