nuxt登录整合JWT

 

生成token

拷贝工具类,及其Properties类

 yml配置

 登录生成token

注入jwtproperties

 登录成功添加token

@Resource
private JwtProperties jwtProperties;

携带Token 

保存token

用户登录成功后,将token保存浏览器

localStorage.setItem('token',baseResult.other.token)

 携带token

对axios进行增强,需要每次都写到token

编写nuxt的插件

 

import { MessageBox, Message } from 'element-ui'

export default function ({ $axios, redirect }) {

$axios.onRequest(config => {

// 从 localStorage 获得token,并添加到头

let token = localStorage.getItem('token')

if(token) {

//Adds header: `Authorization: 123` to all requests

$axios.setToken(token)

}

})

$axios.onError(error => {

const code = parseInt(error.response && error.response.status)

if (code === 401) {

MessageBox.confirm('Token失效', '请确认重新登录', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

redirect('/user/login')

}).catch(() => {

Message({

type: 'info',

message: '已取消重新登录'

});

});

}

})

}

 注册插件

{ src: '~/plugins/axios.js', mode: 'client' }

 校验Token

拷贝工具类+配置类 + yml文件 :jwt相关、白名单相关

sc:
  jwt:
    secret: sc@Login(Auth}*^31)&czxy% # 登录校验的密钥
    pubKeyPath: D:/rsa/rsa.pub # 公钥地址
    priKeyPath: D:/rsa/rsa.pri # 私钥地址
    expire: 360 # 过期时间,单位分钟
  filter:
    allowPaths:
      - swagger
      - /api-docs
      - /user/login
      - /user/check

 编写登录过滤器:对白名单进行放行,其他的内容使用jwt进行处理

 

 获得Token

拷贝yml配置

 

 拷贝jwt工具类 + 拷贝对应Properties配置类

 编写代码:获得请求头,通过请求头获得token

@Resource
private JwtProperties jwtProperties;
@Resource
private HttpServletRequest request;

 

String token = request.getHeader("Authorization");
TbUser loginUser = JwtUtils.getObjectFromToken(token, jwtProperties.getPublicKey(), TbUser.class);

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Nuxt.js 是一个基于 Vue.js 的通用应用框架,它可以帮助我们快速构建单页应用(SPA)和服务端渲染应用(SSR)。而 JWT(JSON Web Token)是一种用于身份验证和授权的开放标准。 要在 Nuxt.js 中实现 JWT,可以按照以下步骤进行: 1. 安装依赖:首先,需要安装一些依赖包。可以使用 npm 或者 yarn 进行安装,例如: ``` npm install jsonwebtoken ``` 2. 创建 JWT 工具类:在 Nuxt.js 项目中,可以创建一个 JWT 工具类来处理 JWT 相关的操作。这个工具类可以包含生成 token、验证 token、解析 token 等方法。可以参考以下示例代码: ```javascript const jwt = require('jsonwebtoken'); class JwtUtil { static generateToken(payload, secret, expiresIn) { return jwt.sign(payload, secret, { expiresIn }); } static verifyToken(token, secret) { try { return jwt.verify(token, secret); } catch (error) { return null; } } static decodeToken(token) { return jwt.decode(token); } } module.exports = JwtUtil; ``` 3. 使用 JWT 工具类:在需要使用 JWT 的地方,可以引入并使用上述创建的 JWT 工具类。例如,在用户登录成功后生成 token,并将其返回给客户端: ```javascript const JwtUtil = require('./path/to/JwtUtil'); // 用户登录成功后生成 token const token = JwtUtil.generateToken({ userId: '123456' }, 'your-secret-key', '1h'); // 将 token 返回给客户端 res.json({ token }); ``` 4. 验证和解析 token:在需要验证和解析 token 的地方,可以使用 JWT 工具类提供的方法进行操作。例如,在需要验证用户身份的路由中,可以使用中间件来验证 token 的有效性: ```javascript const JwtUtil = require('./path/to/JwtUtil'); // 验证 token 的中间件 const verifyTokenMiddleware = (req, res, next) => { const token = req.headers.authorization; if (!token) { return res.status(401).json({ message: 'Unauthorized' }); } const decodedToken = JwtUtil.verifyToken(token, 'your-secret-key'); if (!decodedToken) { return res.status(401).json({ message: 'Invalid token' }); } // 将解析后的 token 数据存储到 req 对象中,方便后续使用 req.user = decodedToken; next(); }; // 在需要验证用户身份的路由中使用中间件 app.get('/protected-route', verifyTokenMiddleware, (req, res) => { // 可以通过 req.user 获取解析后的 token 数据 const userId = req.user.userId; // 其他处理逻辑... }); ``` 这样,就可以在 Nuxt.js 中实现 JWT 的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值