??? ??? ? ?? ??? ?? Vue? ???? ??

??:
???? ????? ??? ??? ?? ? ?? ??? ?? ????. ? ?????? ???? ??? ??? ? ?? ??? ??? ????? ??? ??? ???? ??? ?????. ?? ???? JavaScript ?????? Vue? ??? ??? ? ?? ??? ???? ? ??? ?? ??? ??? ????? ?????. ? ????? ??? ??? ? ?? ??? ?? Vue? ???? ??? ???? ??? ?? ??? ?????.

1. ??? ???
??? ???? ???? ???? ??? ??? ?? ?? ???? ???? ???? ???? ?? ????. Vue??? ?? ??? ????? ???? ???? ???? ? ????.

1. ??? ???? ?? Crypto-js ????? ??
   Crypto-js? AES, DES, SHA, HMAC ?? ?? ??? ??? ????? ???? ????? ???? JavaScript ??? ????????. npm? ?? Crypto-js? ???? Vue ?????? ??? ????? ??? ? ????.

?? npm? ???? Crypto-js? ?????.

npm install crypto-js

?? ?? Vue ?? ??? Crypto-js? AES ????? ?????.

import AES from 'crypto-js/aes'
import enc from 'crypto-js/enc-utf8'

???? AES ????? ???? ???? ???? ? ????.

let text = 'Hello World'
let key = 'secret-key'
let encryptedText = AES.encrypt(text, key).toString()

? ????? AES ????? ???? ?? ??? ??? "Hello World"? ????? "secret-key" ?? ???? ??????. ????? toString() ???? ???? ???? ??? ???? ?????.

2. RSA ??? ??? ???? ??
   RSA? ??? ? ???? ?? ?? ?? ??? ? ?? ?? ???? ????? ???? ??? ??? ???????. jsencrypt ?????? Vue?? RSA ???? ???? ? ??? ? ????.

?? npm? ???? jsencrypt ?????? ?????:

npm install jsencrypt

?? ?? Vue ?? ??? jsencrypt? ?????:

import JSEncrypt from 'jsencrypt'

???? RSA ????? ???? ???? ???? ? ????.

let text = 'Hello World'
let publicKey = 'public-key'
let encrypt = new JSEncrypt()
encrypt.setPublicKey(publicKey)
let encryptedText = encrypt.encrypt(text)

? ???? ??? ?? ??? ?? ??? ??? "Hello World"? RSA ????? ???? ????? ?? ? "public-key"? ???? ??????. ????? ???? ?? cryptoText? ????.

2. ??? ??
??? ???? ??? ?? ???? ???? ????? ????? ??? ?? ? ??? ???? ?? ????. Vue??? HTTPS ????? ?? ??? ???? ??? ??? ??? ? ????.

1. HTTPS ???? ??
   HTTPS? SSL/TLS ????? ???? ???? ????? ???? ?? HTTP ???????. Vue??? ??? ???? SSL ???? ???? HTTPS? ???? ? ????.

?? ?? ??? SSL ???? ???? ???. ?? SSL ???? ????? ?? ? ????. ?? ?? SSL ???? ????? ??? ?????.

Vue ?????? HTTP ??? HTTPS ???? ?????.

axios.defaults.baseURL = 'https://api.example.com'

2. ?? ?? ??
   ?? ??? ? ??? ??? ???? ??? ??? ???? ????? ???? ?? ?? ?????. vue-router ? axios? ???? Vue?? ?? ??? ??? ? ????.

?? ???? ??? ? ??? ??? ?????? ?????. ?? ?? ?????? ??? ?? ???? ?????.

Vue ??????? axios ????? ?? ??? ??? ? ????.

axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

? ????? ?? ?? ?? ??? ???? ?? ??? Authorization ??? ???? ?? ??? ?? ??? ?????. ?????.

??:
? ???? ??? ??? ? ?? ??? ?? Vue? ???? ??? ??????. ??? ??? ? ???? ?? Crypto-js ?????, RSA ??? ??? ????, HTTPS ???? ? ?? ??? ???? ??? ?? ?? ? ??? ??? ???? ??? ??? ???? ? ????. ? ??? ??? ??? ? ?? ??? ?? Vue? ??? ???? ? ??? ??? ????.

?? ??:

import AES from 'crypto-js/aes'
import enc from 'crypto-js/enc-utf8'

let text = 'Hello World'
let key = 'secret-key'
let encryptedText = AES.encrypt(text, key).toString()

import JSEncrypt from 'jsencrypt'

let text = 'Hello World'
let publicKey = 'public-key'
let encrypt = new JSEncrypt()
encrypt.setPublicKey(publicKey)
let encryptedText = encrypt.encrypt(text)

axios.defaults.baseURL = 'https://api.example.com'

axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

? ??? ??? ??? ? ?? ??? ?? Vue? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!