在main.js中进行全局注册:
import * as directives from '@/directives'
// 注册自定义指令
// 遍历所有的导出的指令对象 完成自定义全局注册
Object.keys(directives).forEach(key => {
// 注册自定义指令
Vue.directive(key, directives[key])
})
此导入语法可以获取文件中所有的指令对象:import * as 变量 得到的是一个对象{ 变量1:对象1,变量2: 对象2 ... }。
Object.keys()的用法:返回对象中每一项key的数组。
获取用户资料
封装一个用户资料的方法需要 headers
headers 中的 Authorization 相当于我们开门(调用接口)时的钥匙(token),我们在打开任何带安全权限的门的时候都需要钥匙(token),为了避免每次调用接口的时候都携带 token ,可以在 axios拦截器中统一注入 token
service.interceptors.request.use(config => {
// 在这个位置需要统一的去注入token
if (store.getters.token) {
// 如果token存在 注入token
config.headers['Authorization'] = `Bearer ${store.getters.token}`
}
return config // 必须返回配置
}, error => {
return Promise.reject(error)
})
用户状态在开发中会频繁用到, 可以将用户状态封装到 action 中
// 因为是异步操作, 所以用到了 async / await
async getUserInfo (context) {
const result = await getUserInfo() // 获取返回值
context.commit('setUserInfo', result) // 将整个的个人信息设置到用户的vuex数据中
}
初始化 state
const state = {
token: getToken(), // 设置token初始状态 token持久化 => 放到缓存中
userInfo: {} // 定义一个空的对象 不是null 否则会引起异常和报错
}
设置用户资料
setUserInfo(state, userInfo) {
state.userInfo = { ...userInfo }
// 用 浅拷贝的方式去赋值对象 因为这样数据更新之后,才会触发组件的更新
},
删除用户信息
reomveUserInfo(state) {
state.userInfo = {}
// 可以直接给一个空对象
}
权限拦截
获取用户资料是需要 token 的, 所以需要在有 token 的前提下才能获取用户资料,所以这个方法需要进行判断,在有 token 的时候,如果不是登录页就能获取到资料,为了避免重复调用, 判断如果有了用户的id ,就直接放行,没有的话先获取用户资料再放行
退出登录
因为设置了权限,当没有token时会将页面跳转至登录页,所以想要实现退出功能,封装一个方法,先删除 vuex 和缓存中的 token,再删除用户资料,最后给退出按钮绑定一个点击事件触发这个方法,跳转到登录页
token 失效的主动介入
为了安全性, token 是有时效性的, 可以主动检查
登录成功后获取 token ,再存入时间戳, 发送请求的时候注入 token , 判断两次时间戳的差值,如果大于了规定的时长, 就登出, 如果小于规定的时长就继续请求
token 失效的被打处理
在响应请求的错误信息里配置, 当 error.response.data.code === 10002 时 (即后端告诉我们token超时), 调用方法退出登录