egg(十二):生成token,设定有效期，egg+vue

谁践踏了优雅 2022-09-17 05:20 419阅读 0赞

### 前言： ###

### 使用 egg-jwt 来完成egg后台需要的 鉴权 ，生成token，发送给前端 ###

# **目录：** #

后端部分：

1、安装插件，

2、配置plugin.js

3、在config.default.js配置，这里不推荐把后面的token中间件在这里引入，这里是的方法是全局方法，我们的token验证只是登录后的接口需要，其他不需要，我这里是按需判断

4、middleware / jwtErr.js ,中间组件token校验，如果过期或者没有就返回前端给401错误

5、登录的接口，需要生成token，并配置有效时间

6、登录以后的接口，需要按需判断token, router.js中按需配置

方法的第二个参数，加上jwtErr，就开始验证token了，不加就不验证

app.get('/setUserList',jwtErr, controller.new.user.getUserList)

前端部分：

1、登录部分获取我们后端的token

2、util.js方法，cookie方法，对token进行封装

3、axios的公共方法，响应拦截里面写方法

逻辑：在失败的方法里面，调用失败的处理函数，对401进行特殊处理，弹框提示，并踢到登录页面，清空cookie

4、axios的公共方法，请求拦截器，可以在这里里面，每次请求后端前，都把token加上,也可以在单独的方法里面

--------------------

# 后端部分： #

## 1、安装插件， ##

cnpm i egg-jwt --save

## 2、配置plugin.js ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_16_color_FFFFFF_t_70_g_se_x_16][]

exports.jwt = {
      enable: true,
      package: 'egg-jwt',
    };//生成token

## 3、在config.default.js配置，这里不推荐把后面的token中间件在这里引入，这里是的方法是全局方法，我们的token验证只是登录后的接口需要，其他不需要，我这里是按需判断 ##

module.exports = appInfo => {
      /**
       * built-in config
       * @type {Egg.EggAppConfig}
       **/
      const config = exports = {};
    
    加入下面这个
    
      //生成token
      config.jwt  = {
        secret: "haoxing" //秘钥
      };
    
    
    
    }

## 4、middleware / jwtErr.js ,中间组件token校验，如果过期或者没有就返回前端给401错误 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_7_color_FFFFFF_t_70_g_se_x_16][]

//检查token
    module.exports = (options) => {
      return async function jwtErr(ctx, next) {
        const token = ctx.request.header.authorization;
        let decode = '';
        if (token) {
          try {
            // 解码token
            decode = ctx.app.jwt.verify(token, options.secret);
            await next();
            console.log('decode======>',decode);
          } catch (error) {
            ctx.status = 401;
            ctx.body = {
              message: error.message,
            };
            return;
          }
        } else {
          ctx.status = 401;
          ctx.body = {
            message: '没有token',
          };
          return;
        }
      };
    }

## 5、登录的接口，需要生成token，并配置有效时间 ##

let params = ctx.request.body   
        //需要存储的 token 数据
       let token_con = {
          'username': params.username,
          'password': params.password,
        }
    
      let term = (60 * 60 * 24) + 's' //token有效期,设置为24小时
      const token = app.jwt.sign(token_con, app.config.jwt.secret, { expiresIn: term });

## 6、登录以后的接口，需要按需判断token, router.js中按需配置 ##

/**
     * 路由配置
     * @param app
     */
    module.exports = app => {
      //middleware 是中间件，就是能用到我们上面的方法
      const { router, controller, middleware } = app;
      const jwtErr = middleware.jwtErr(app.config.jwt) //检验token
    
      //用户信息-user  jwtErr加上就是验证token
      app.get('/setUserList',jwtErr, controller.new.user.getUserList);
      app.post('/setUserList', controller.new.user.postUserList);
    
    }

### 方法的第二个参数，加上jwtErr，就开始验证token了，不加就不验证 ###

### app.get('/setUserList',jwtErr, controller.new.user.getUserList) ###

# 前端部分： #

## 1、登录部分获取我们后端的token ##

import { setToken } from '@/utils/util.js'

axios({
        method:'post',
        url:你的地址,
        data:params
     }).then(res=>{
        if(res.data.code == 200){
           this.$message.success('登录成功')
           //储存token，我这里是
            setToken(res.data.data)
            //跳到首页
            this.$router.push({
                name: 'HomeIndex'
              })
       }else{
              this.$message.error(res.data.data)
              this.getImgTextUrl() //刷新验证码
            }
        })

## 2、util.js方法，cookie方法，对token进行封装 ##

import Cookies from 'js-cookie'
    // cookie保存的天数
    
    export const TOKEN_KEY = 'NOW_TOKEN'
    
    export const setToken = (token, cookieExpires) => {
      Cookies.set(TOKEN_KEY, token, { expires: cookieExpires || 1 })
    }
    
    export const getToken = () => {
      const token = Cookies.get(TOKEN_KEY)
      if (token) return token
      else return false
    }
    
    export const delToken = () => {
      Cookies.remove(TOKEN_KEY)
    }

## 3、axios的公共方法，响应拦截里面写方法 ##

### 逻辑：在失败的方法里面，调用失败的处理函数，对401进行特殊处理，弹框提示，并踢到登录页面，清空cookie ###

import axios from 'axios'
    import ELEMENT from 'element-ui'
    import router from '../router'
    import { getToken,delToken } from './util.js'
    
    // 添加响应拦截器-------------------------------------
    axios.interceptors.response.use(res => {
      const { data, status, headers } = res
      console.log('@return-data:')
      console.log(data)
      // console.log('@return-headers:')
      //   // console.log(headers)
      return { data, status, headers }
    }, error => {
    
    
      // 统一处理请求失败问题
      errorState(error)
    
    
    
      console.log('@error:')
      console.log(error)
      return Promise.reject(error)
    });
    
    
    // 封装数据返回失败提示函数------------------------------
    function errorState(error) {
      let code = error.response.status
      if(  code === 401) {
        ELEMENT.Message.error('长时间未操作，需要重新登录！'  , 1);
        router.replace({
          name: 'Login'
        })
    
        delToken()
    
      }
    }

## 4、axios的公共方法，请求拦截器，可以在这里里面，每次请求后端前，都把token加上,也可以在单独的方法里面 ##

import axios from 'axios'
    import { getToken} from './util.js'
    
    axios.interceptors.request.use(config => {
      
      let token = getToken();
      if(token) {
        axios.headers['authorization'] =token
      };
    
      return config
    },error => {
      // 请求错误时弹框提示
      return Promise.reject(error)
    })

### 到此就结束了！ ###

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6667e34758764bc3998fa8bc5837d8d6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_7_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/575b13788ef14f568094c0c9267cade6.png