1.token是什么?
token像是一把钥匙,在点击登录的时候,后台会返回一个token。在调用其它接口的时候可能需要使用到token。
token是一段加密的字符串如:
2.在请求头中加入token
有些接口的访问,是需要携带token过去的,这个时候可以在请求拦截器里面进行添加, 这个时候当我们请求接口的时候就会将token携带过去。
import Store from '@/store'
if (Store.state.user.token) {
config.headers.Authorization = `Bearer ${Store.state.user.token}`
}
3.将token存储到Vuex中
Vuex刷新数据会进行丢失,这个使用就会用到本地存储的方式,用的较多的插件CookieJs。这样就很好地解决了刷新页面丢失token的问题。
(1)cookieJs的用法:
import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
(2)在store/modules/user.js模块下
// 将token存储vuex中,vuex刷新就没了,解决刷新就没了的问题
import { getToken, setToken } from '@/utils/auth'
import { sysLogin } from '@/api/login'
import { sysProfile, sysUser } from '@/api/user'
import { Message } from 'element-ui'
// import { sysProfile } from '@/api/user'
const state = {
// 有就取token 没有就为空
token: getToken() || '',
userInfo: ''
}
const mutations = {
setToken(state, value) {
state.token = value
setToken(value)
},
setUserInfo(state, value) {
state.userInfo = value
}
}
const actions = {
// 登录
async toLogin(store, form) {
const res = await sysLogin(form)
Message.success('登录成功')
store.commit('setToken', res.data)
console.log(2)
},
// 获取用户信息
async getUserInfo({ commit }) {
const res = await sysProfile()
console.log(res, '用户基本信息')
// 获取用户头像
const res2 = await sysUser(res.data.userId)
console.log(res2, '用户头像')
commit('setUserInfo', Object.assign({}, res.data, res2.data))
}
}
const getters = {}
export default {
namespaced: true,
state,
mutations,
getters,
actions
}
4.token失效的处理
token有一个时长,这个时长由后端进行设置,当出现401的时候token失效了,用户已经不能登录。
这个时候应该让用户返回到登录的页面, 并清除token,和用户的信息。
(error) => {
if (error.response && error.response.status === 401) {
// 清除token
// 清除用户信息
Store.commit('user/setToken', '')
Store.commit('user/setUserInfo', '')
Router.push('/login')
// 提示错误信息
Message.error(error.response.data.message)
// 跳转到登录页面进行传值
Router.push('/login?redirect=' + window.location.href.split('#')[1])
}
return Promise.reject(error)
}
服务器返回的状态码为401,通常情况来讲是因为权限不足的原因。
扩展小知识点:
常见的http状态码:
2xx 代表服务器响应成功
3xx 重定向
4xx 权限不足
500 可能是服务器的错误
5.用token用户就一定登录了吗?
答案是不一定,在登录的时候别人也可以对token进行伪造,但是有一个东西用户一定是登录了,那就是用户的信息。