收藏
回答

vue中实现全局的setCookie,getCookie以及delCookie方法笔记?

vue中实现全局Cookie的方法

回答关注问题邀请回答
收藏

1 个回答

  • 微盟
    微盟
    2021-04-05
    import Vue from 'vue'
    import Vuex from 'vuex'
    import VueRouter from 'vue-router'
    import App from '../component/App.vue'
    import Login from '../component/Login.vue'
    import UserInfo from '../component/UserInfo.vue'
    //状态管理
    Vue.use(Vuex)
      //路由
    Vue.use(VueRouter)
    
    //路由配置
    //如果需要加菜单,就在这里添加路由,并在UserMenu.vue添加入口router-link
    const router = new VueRouter({
      routes: [{
        path: '/login',
        component: Login
      }, {
        path: '/user_info',
        component: UserInfo
      }]
    })
    
    //Vuex配置
    const store = new Vuex.Store({
      state: {
        domain:'http://test.example.com', //保存后台请求的地址,修改时方便(比方说从测试服改成正式服域名)
        userInfo: { //保存用户信息
          nick: null,
          ulevel: null,
          uid: null,
          portrait: null
        }
      },
      mutations: {
        //更新用户信息
        updateUserInfo(state, newUserInfo) {
          state.userInfo = newUserInfo;
        }
      }
    })
    
    //设置cookie,增加到vue实例方便全局调用
    Vue.prototype.setCookie = (c_name, value, expiredays) => {
      var exdate = new Date();    
      exdate.setDate(exdate.getDate() + expiredays);    
      document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
    }
    
    //获取cookie
    Vue.prototype.getCookie = (name) => {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return (arr[2]);
        else
            return null;
    }
    
    //删除cookie
    Vue.prototype.delCookie =(name) => {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = this.getCookie(name);
        if (cval != null)
          document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
      }
    
    //vue实例
    var app = new Vue({
      data: {},
      el: '#app',
      render: h => h(App),
      router,
      store,
      watch:{
        "$route" : 'checkLogin'
      },
      created() {
        this.checkLogin();
      },
      methods:{
        checkLogin(){
    
          //检查是否存在session
          if(!this.getCookie('session')){
            this.$router.push('/login');
          }else{
            this.$router.push('/user_info');
          }
        }
      }
    })
    
    2021-04-05
    有用
    回复
登录 后发表内容
问题标签