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

最新推荐文章于 2024-01-18 15:15:48 发布

妍崽崽@

最新推荐文章于 2024-01-18 15:15:48 发布

阅读量1.8k

点赞数 1

分类专栏： node 文章标签： egg vue

本文链接：https://blog.csdn.net/weixin_44727080/article/details/121030411

版权

node 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在egg.js后台使用egg-jwt插件进行鉴权，包括安装插件、配置、中间件创建、登录接口生成token及前端获取、存储与验证token的过程，确保只有登录后的接口才需要token验证，错误处理则通过axios响应拦截器进行401错误提示并跳转登录页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

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

后端部分：

1、安装插件，

cnpm i egg-jwt --save

2、配置plugin.js

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错误

//检查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)
})