开发喵星球

若依框架使用localStorage代替Cookie(八十五)

对于一些特殊情况或需求,项目不需要cookie,那么可以使用localStorage来代替。

1、package.json删除cookie的相关依赖”js-cookie”:”3.0.1″

main.js. store/modules/app.js. utils/auth.js、login.vue文件,
删除导入的

import Cookies from 'js-cookie'

2、main.js的Cookies.get更换为localStorage.getltem

Vue.use(Element, {
  size: localStorage.getItem('size') || 'medium' // set element-ui default size
})

3、utils/auth.js更换Cookies相关方法为localStorage

const TokenKey = 'Admin-Token'

export function getToken() {
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  return localStorage.removeItem(TokenKey)
}

4、store/modules/app.js更换Cookies相关方法为localStorage

const state = {
  sidebar: {
    opened: localStorage.getItem('sidebarStatus') ? !!+localStorage.getItem('sidebarStatus') : true,
    withoutAnimation: false,
    hide: false
  },
  device: 'desktop',
  size: localStorage.getItem('size') || 'medium'
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    if (state.sidebar.hide) {
      return false;
    }
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      localStorage.setItem('sidebarStatus', 1)
    } else {
      localStorage.setItem('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    localStorage.setItem('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  },
  SET_SIZE: (state, size) => {
    state.size = size
    localStorage.setItem('size', size)
  },
  SET_SIDEBAR_HIDE: (state, status) => {
    state.sidebar.hide = status
  }
}
....

5、login.vue更换Cookies相关方法为localStorage

....
getCookie() {
  const username = localStorage.getItem("username");
  const password = localStorage.getItem("password");
  const rememberMe = localStorage.getItem('rememberMe')
  this.loginForm = {
    username: username === null ? this.loginForm.username : username,
    password: password === null ? this.loginForm.password : decrypt(password),
    rememberMe: rememberMe === null ? false : Boolean(rememberMe)
  };
},
handleLogin() {
  this.refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true;
      if (this.loginForm.rememberMe) {
        localStorage.setItem("username", this.loginForm.username);
        localStorage.setItem("password", encrypt(this.loginForm.password));
        localStorage.setItem('rememberMe', this.loginForm.rememberMe);
      } else {
        localStorage.removeItem("username");
        localStorage.removeItem("password");
        localStorage.removeItem('rememberMe');
      }
      this.store.dispatch("Login", this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
      }).catch(() => {
        this.loading = false;
        if (this.captchaEnabled) {
          this.getCode();
        }
      });
    }
  });
}
   
分类:Java/OOP 作者:无限繁荣, 吴蓉 发表于:2023-12-27 10:52:04 阅读量:191
<<   >>


powered by kaifamiao