umi如何实现鉴权

什么是jwt鉴权

JWT（JSON Web Token），本质就是一个字符串书写规范。作用是用来在用户和服务器之间传递安全可靠的信息
在目前前后端分离的开发过程中，使用token鉴权机制用于身份验证是最常见的方案，流程如下：
服务器当验证用户账号和密码正确的时候，给用户颁发一个令牌，这个令牌作为后续用户访问一些接口的凭证后续访问会根据这个令牌判断用户时候有权限进行访问
Token，分成了三部分，头部（Header）、载荷（Payload）、签名（Signature），并以.进行拼接。其中头部和载荷都是以JSON格式存放数据，只是进行了编码

生成token

后端

安装第三方插件

npm i jsonwebtoken

生成token

var jwt = require('jsonwebtoken')

 let user = {
    username: 'admin',
  }
    //生成token
  let token = 'Bearer ' + jwt.sign(user, 'qyk', { expiresIn: '1h' })

在入口文件app.js中进行验证
下载插件

npm i express-jwt

进行请求验证（写在路由上面）

app.use(
  expressJWT.expressjwt({
    secret: "qyk",//跟生成token时的要一致
    algorithms: ["HS256"],
  }).unless({
    path: [ { url: /^\/upload/, methods: ["GET"] } ],//不需要验证的路由接口
  })
);

前端

在umi中给axios添加请求头
新建一个文件 api.js

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'//地址
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    let token = sessionStorage.getItem('token')//获取到后端传过来的token
    config.headers.Authorization = token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
export default axios

在使用axios的文件引入 api.js

// import axios from '../api.js'
//模拟口段token
// let token = sessionStorage.setItem('token','Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWF0IjoxNjc5MDE3MjE3LCJleHAiOjE2NzkwMjA4MTd9.jRl8Egr7VOmZ68GFHqirjHjuXhVel72KGsO-WMwgydY')
// axios.post('/infosss',{name:'222'}).then(res=>{
//   console.log(res);
// })  
})