Dans Vue, token signifie « jeton », qui est une chaîne générée par le serveur et un identifiant permettant au client de faire une demande ; lorsque l'utilisateur se connecte pour la première fois, le serveur génère un jeton et le renvoie au client. Le client n'a qu'à apporter le jeton pour demander des données, et il n'est pas nécessaire d'utiliser un nom d'utilisateur et un mot de passe.
Méthode 1 : Utilisez localStorage pour accéder au cookie : vérification du jeton effectuée lors de la connexion frontale (routing guard, intercepteur de requête, intercepteur de réponse
Méthode 2 : Installer js-cookie (plug-in)
Utilisation : Comment utiliser js-cookie
2. Encapsulation de la méthode js-cookie
Après l'installation, créez un dossier, src/utils/auth.js
import Cookies from 'js-cookie'
const TokenKey = 'icp-token'
const UserKey = 'User-Token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function getUserId() {
return Cookies.get(UserKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function setUserId(id) {
return Cookies.set(UserKey, id)
}
export function removeToken() {
Cookies.remove(TokenKey)
removeTokenAll();
return Cookies.remove(UserKey)
}
//清除uap的cookie 不然跳转过去还是登录状态
function removeTokenAll() {
Cookies.remove('accessToken')
Cookies.remove('refreshToken')
Cookies.remove('uapAccessToken', {
path: '',
domain: '.minexiot.com'
})
}
3. Utiliser (*point important, peu importe comment accéder au token. Vous pouvez également écrire un accès localStorage sans plug-in. L'essentiel est d'apporter le token lors d'une demande) et de l'utiliser dans la requête
. js (traitement des requêtes axios)
import {
getToken } from '@/utils/auth'
// request拦截器
service.interceptors.request.use(config => {
if(getToken ()){
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
})
Ou utilisez-le lorsque le routeur saute
import {
getToken } from '@/utils/auth'
router.beforeEach((to, from, next) => {
//处理 如果有token
if (getToken()) {
}else{
}
})
Logique générale : l'utilisateur se connecte au backend pour la première fois et renvoie le jeton, qui est stocké dans localStorage ("Bearer" doit être ajouté devant le jeton). Lors du saut, le jeton est vérifié.
export function register(data) {
return request({
url: '/register',
headers: {
isToken: false
},
method: 'post',
data: data
})
}
en-têtes : { Autorisation : localStorage.getItem('token'), }, code pour accéder aux cookies sans utiliser js-cookie : vérification par jeton de la méthode de vérification de connexion