1. 前言

toke简介和md5用起来其实还是非常简单的
这里也就抛砖引玉,写写基础用法

---

2. 首先是md5的安装

npm install --save js-md5

---

1.需要的地方引入

import md5 from 'js-md5'

---

2. 或者是挂到原型上

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

toke简介
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
      }
}

---

参考资料

toke简介

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉