vue 登录存储token问题。
一、第一种方法是自己起一个token的变量

//登录、
 this.$axios.post("login", user).then(res => {
             console.log(res)
            if (res.data.code === "200") {
              const token01 = res.data.data.user;
              // 存储token至ls
              var token = {};
              token.username = token01.username;
              token.tokens =res.data.data.token;
              localStorage.setItem("user", JSON.stringify(token));
              // 存储数据
              this.$store.dispatch("setIsAutnenticated", !this.isEmpty(token));
              this.$store.dispatch("setUser", token);
              // 跳转到首页
              this.$router.push("/index");
              this.$message({
                type: 'success',
                message:  "登录成功"
              });
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
           })



——————————————————————————————————————————————————————
isEmpty(value) {
      return (
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    }
//state部分
export default { // 需要维护的状态
    isAutnenticated: false, // 是否授权
    user: {}, // 存储用户信息
 
}

//mutations部分
const types = {
    SET_IS_AUTNENTIATED: 'SET_IS_AUTNENTIATED', // 是否认证通过
    SET_USER: 'SET_USER' // 用户信息
}

export default {
    [types.SET_IS_AUTNENTIATED] (state, isAutnenticated) {
        if (isAutnenticated) {
             state.isAutnenticated = isAutnenticated 
            } else {
                 state.isAutnenticated = false
                }
    },
    [types.SET_USER] (state, user) {
        if (user) {
             state.user = user
            } else { 
                state.user = {} 
            }
    },
}

//getters部分
export default {
    isAutnenticated: state => state.isAutnenticated, // 获取授权状态
    user: state => state.user // 获取用户信息
}
//actions部分
const types = {
    SET_IS_AUTNENTIATED: 'SET_IS_AUTNENTIATED', // 是否认证通过
    SET_USER: 'SET_USER' // 用户信息
}

export default {
    setIsAutnenticated: ({ commit }, isAutnenticated) => {
        commit(types.SET_IS_AUTNENTIATED, isAutnenticated)
    },
    setUser: ({ commit }, user) => {
        commit(types.SET_USER, user)
    },
    clearCurrentState: ({ commit }) => {
        commit(types.SET_IS_AUTNENTIATED, false)
        commit(types.SET_USER, null)
    },

}
  因为我是把vuex 模块拆开了 所以是这种写法、
//请求拦截
axios.interceptors.request.use(config => {
    // 成功后加载动画
    let user = JSON.parse(localStorage.getItem("user"));
    if (!user) {  //没有user就不添加token的请求头 config.headers.Authorization=null 不注释也可以
        // config.headers.Authorization=null
       
      }else{
        // 设置请求头(正式开发中放开一下内容)
        config.headers.Authorization = user.tokens;
      }
    return config
},
error => {
    // 失败后执行的内容
    return Promise.reject(error)
})

// 响应拦截
axios.interceptors.response.use(response => {
 const status=response
    if (status.data.code == 400 || status.data.code == "400") {
        Message.error("token失效,请重新登录");
        //清除token
       localStorage.removeItem('user')
        //跳转到登录页面
        window.location = "/login"
    }
    return response
},error => {
    if (error.response) {
        Message.error(error.response.data)
      } else {
        Message.error('请求超时')
      }
    // 在获取错误code
   

    return Promise.reject(error)
})

大概思路是。在登录的时候 获取token,把token存储到vuex中。然后再请求拦截这添加请求头,在响应拦截的返回错误的时候 去判断他过没过期。过期就跳转到登录页面。当没有token的情况下。我们用的 localStorage保存信息。除非 点击退出 去设置清除token。才会跳转登录页面。就不会涉及 什么时间问题。所以,在理由守卫这也要以token为标准。去判断有没有token。

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐