jwt令牌过期后如何注销

Posted 2023-02-22

【中文标题】jwt令牌过期后如何注销

【英文标题】：How to logout once jwt token is expired

【发布时间】：2020-02-20 09:57:12

【问题描述】：

我正在使用node.js 和vue.js 开发网络应用程序，我正在使用jwt 和passport.js 使用passport-jwtstrategy 进行身份验证和维护会话

我已经完成了从创建 jwt 到保护路由的所有事情，现在我的问题是在生成 jwt 时我正在传递 expiresIn:3600 所以我想从 Ui 自动注销我的用户并从 localStorage 中删除令牌一次已经一小时了

在解码我的jwt 时，我得到了

 
  "name": "Dheeraj",
  "iat": 1571896207,
  "exp": 1571899807

那么我怎样才能得到实时的退出时间

在我的auth.js vue 存储文件中，当用户单击注销时，我的注销代码是

logout( commit ) 
        return new Promise((resolve, reject) => 
            localStorage.removeItem('jwt-token')
            localStorage.removeItem('user-name')
            commit('setAuthUser', null)
            resolve(true)
        )

    ,

在同一个文件中，我有一个方法 getAuthUser，它在页面加载或重新加载时运行，以检查保护 rout 和 guestUser

getAuthUser( commit, getters ) 
        const authUser = getters['authUser']
        const token = localStorage.getItem('jwt-token')
        const isTokenValid = checkTokenValidity(token)
        if (authUser && isTokenValid) 
            return Promise.resolve(authUser)
        

        commit('setAuthUser', token)
        commit('setAuthState', true)
        debugger
        return token


    

所以我的令牌过期后如何注销 这里的任何人请指导我如何在令牌过期后注销

编辑

在我的 router.js 文件中

router.beforeEach((to, from, next) => 
store.dispatch('auth/getAuthUser')
    .then((authUser) => 
        const isAuthenticated = store.getters['auth/isAuthenticated']

        if (to.meta.onlyAuthUser) 
            if (isAuthenticated) 
                next()
             else 
                next( name: 'login' )
            
         else if (to.meta.onlyGuestUser) 
            if (isAuthenticated) 
                next( name: 'welcome' )
             else 
                next()
            
         else 
            next()
        
    )

)

从我的身份验证文件中，我调用 get authUser，我已经在上面提到过

为了检查令牌的有效性，我正在使用此代码

function checkTokenValidity(token) 
if (token) 
    const decodedToken = jwt.decode(token)
    return decodedToken && (decodedToken.exp * 1000) > new Date().getTime()


return false

但是当我在登录页面时它返回 false 并且那里没有令牌但是一旦我登录它就会显示 null

我的全局 api 文件

    import axios from 'axios';

export default () => 
    let headers = 
        'cache-control': 'no-cache'
    ;
    let accessToken = localStorage.getItem('jwt-token');

    if (accessToken && accessToken !== '') 
        headers.Authorization = accessToken;

    ;
    return axios.create(
        baseURL: 'http://localhost:8086/',
        headers: headers
    );

【问题讨论】：

可以在router.js中使用beforeEach()，验证jwt token的过期时间

@YashuMittal 嘿，我正在使用 beforeEach() 来检查 authUser，我的问题是我无法从令牌中获取时间，您能帮我处理流程吗？请检查我的编辑

我不知道你为什么需要时间，如果用户尝试移动到其他页面并且令牌已经过期，它应该显示错误或返回 false。

@YashuMittal 我的令牌在 localstorage 上，所以注销时我正在销毁令牌，一旦令牌过期，它就会抛出错误，但我无法在每个页面中放置注销代码并检查 responce===401 是否然后注销我的getAuthUser 每次加载或重新加载页面时都会运行，那么我该如何使用这种方法，请检查我的编辑

@dheerajkumar 您无需在任何地方都放置注销代码来检查响应代码。您可以添加一个全局 http 拦截器来处理它。

【参考方案1】：

参考axios 文档：https://github.com/axios/axios

import axios from 'axios';

export default () => 
    let headers = 
        'cache-control': 'no-cache'
    ;
    let accessToken = localStorage.getItem('jwt-token');

    if (accessToken && accessToken !== '') 
        headers.Authorization = accessToken;

    ;
    const instance = axios.create(
        baseURL: 'http://localhost:8086/',
        headers: headers
    );

    instance.interceptors.response.use((response) => 
        if(response.status === 401) 
             //add your code
             alert("You are not authorized");
        
        return response;
    , (error) => 
        if (error.response && error.response.data) 
             //add your code
             return Promise.reject(error.response.data);
        
        return Promise.reject(error.message);
    );

    return instance;

【讨论】：

嘿，它没有帮助我已经给出了 20 秒的到期时间，所以当我刷新之后它不会在任何情况下不在这里 if(response.status === 401) 也不在这里 (error) =>

刷新页面后，您可能需要向后端发送请求以验证令牌。否则拦截器不会生效。

是的，有一些 api 在页面引用上运行，在后端我也在用护照检查它们

好的，这是为了在令牌过期并且用户使用过期令牌通过 axios 进行发布/获取时做出反应。如何处理页面刷新，或者当用户直接在浏览器中输入一个url？

刷新页面和直接输入URL基本相同，浏览器会先加载html、CSS、javascript然后向服务器发送AJAX请求。