vue3.0实现登录成功以后,如何写入cookie保存token,读取cookie,并显示用户名

一、 分装成公用方法

 methods: {
	      setCookie(name, value, exdays) {
	      //name  :表示cookie的名称,比如token
	      //value  :表示cookie的值
	      //exdays  :表示cookie的有效时间
	        var d = new Date();
	        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
	        var expires = "expires=" + d.toGMTString();
	        document.cookie = name + "=" + value + "; " + expires;
	      },
      //写入用户名
	      getCookie(name) {
	        let ret, m;
	        if (typeof name === 'string' && name !== '') {
	          if ((m = String(document.cookie).match(
	            new RegExp('(?:^| )' + name + '(?:(?:=([^;]*))|;|$)')))) {
	            ret = m[1] ? decodeURIComponent(m[1]) : ''
	          }
	        }
	        return ret
	      },
	 }

登录成功逻辑里面写入cookie

this.setCookie("token", res.data.token,1);
this.setCookie("username", res.data.data.username,1);
this.setCookie("uid", res.data.data.uid,1);

vue3.0实现登录成功以后,如何写入cookie保存token,读取cookie,并显示用户名_第1张图片

如何读取cookie

//
 created() {
      this.loginInit();
    },
 methods: {
      loginInit() {
        var _this = this;
        function init() {
          var ulog = readCookie("username"); 
          if (!!ulog) {
            _this.userName = readCookie("username");
          }
        }
        init();  //
        //读取cookie
        function readCookie(name) {
          var ret = '',
            m;
          if (typeof name === 'string' && name !== '') {
            if ((m = String(document.cookie).match(
              new RegExp('(?:^| )' + name + '(?:(?:=([^;]*))|;|$)')))) {
              ret = m[1] ? decodeURIComponent(m[1]) : '';
            }
          }
          return ret;
        }


      },
    }

你可能感兴趣的:(vue.js)