vue2项目之身份认证实现

身份认证实现

6.4.1 uuid 实现游客认证

1、在 src/utils 文件夹创建 uuid_token.js

// 导出函数 getUUID() 用于生成 uuid

import {
    
     v4 as uuidv4 } from 'uuid';

export const getUUID = function() {
    
    
    // 将 uuid 存储与浏览器中 避免每次产生新id
    let uuid = localStorage.getItem('uuid');

    if(!uuid) {
    
    
        uuid = uuidv4();
        localStorage.setItem('uuid', uuid);
    }

    return uuid;
}

2、在 api/requests.js （axios 封装文件）中对请求头添加 uuid

import {
    
     getUUID } from '@/utils/uuid_token'

//请求拦截器----在项目中发请求前执行的函数
requests.interceptors.request.use(function(config) {
    
    
    // config 为一个 AJAX 对象

    // 给请求头添加游客 uuid （userTempId 为后端提供的请求头属性）
    config.headers.userTempId = getUUID();

    // 加载进度条
    nprogress.start();

    return config;
})

这样每个请求的请求头的 userTempId 都为游客的 uuid，且游客的 uuid 存在浏览器本地存储里

6.4.2 token 实现身份认证

我们登录之后可以从服务器获取到 token，我们将 token 存到本地存储中，并在发送请求前在请求头中配置 token 属性。

if(result.code == 200) {
    
    
    localStorage.setItem('token', result.data.token); // 本地存储 token

    return {
    
    message: '登录成功'};
}

requests.interceptors.request.use(function(config) {
    
    
    ...
    // 给请求头添加 token
    let token = localStorage.getItem('token');
    if(token) config.headers.token = token;
    ...
})

通过 token 我们可以向服务器发送请求获取用户数据，首先在 APP 里面申请！