vue 登录存token vuex
vue 登录存储token问题。一、第一种方法是自己起一个token的变量//登录、this.$axios.post("login", user).then(res => {console.log(res)if (res.data.code === "200") {const token01 = re...
·
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。
更多推荐



所有评论(0)