1. 前言
toke简介和
md5用起来其实还是非常简单的这里也就抛砖引玉,写写基础用法
2. 首先是md5的安装
npm install --save js-md5
1.需要的地方引入
import md5 from 'js-md5'
- 或者是挂到原型上
import md5 from 'js-md5'; Vue.prototype.$md5 = md5;
3.使用
this.$md5('需要进行加密的内容')
使用哪种方式都行,开心就好
3. 组件内使用
md5 最常用的就是进行密码加密
const onSubmit = async (values) => { const { data } = await login({ "loginName": values.username, "passwordMd5": md5(values.password) }) }
当然 这个请求封装 axios安装,自己玩就好
4. token
token现在确实是非常常用的,但是对于前端来说,设置个请求头,在进行一些存储操作就哦了其实
bear也都差不多
4.1 token 请求头配置
axios的全局配置里面 书写
axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '//xxx/api/v1' : '//ooxx.api/v1' axios.defaults.withCredentials = true axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest' axios.defaults.headers['token'] = localStorage.getItem('token') || '' axios.defaults.headers.post['Content-Type'] = 'application/json'
4.2 读取方法
封装的方法 util.js里面
export const getLocal = (name) => { return localStorage.getItem(name) }
4.3 存储方法
封装的方法 util.js里面
export const setLocal = (name, value) => { localStorage.setItem(name, value) }
4.4
根据登录的结果 存储token
const { data } = await login({ "loginName": values.username, "passwordMd5": md5(values.password) }) setLocal('token', data) // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置 window.location.href = '/'
注意的是需要刷新界面
4.5 getToken的应用
判断有没有
token进而判断当前的登录状态可以进行未登录 ,某些界面不让访问的操作
onMounted(() => { const token = getLocal('token') if (token) { state.isLogin = true } }
