如何设置身份验证标头和保护vuejs和节点中的路由

Question

我正在使用passport-jwt策略来保护我的应用程序中的身份验证用户，一旦登录，我现在就生成一个jwt-token，我想保护我的欢迎页面，以便用户在未登录的情况下无法打开它

因此，当我登录时，我像这样用jwt-token创建payload

我的user.js文件

const payload = { email: rows[0].email } // jwy payload
            console.log('PAYLOAD')
            console.log(payload)
            jwt.sign(
                payload,
                key.secretOrKey, { expiresIn: 3600 },
                (err, token) => {
                    res.json({
                        success: true,
                        token: 'Bearer ' + token,
                        email
                    })

                })

现在在我的passport.js中，我正在这样做

   const opts = {};

opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
opts.secretOrKey = keys.secretOrKey;

passport.use(new JwtStrategy(opts, (jwt_payload, done) => {

    let payLoadEmail = jwt_payload.email //payload data what I have passed in creating jwt 
    console.log("payload email :" + payLoadEmail)
    User.fetchLogedInUser(payLoadEmail)
        .then(([rows]) => {
            if (rows.length > 0) {
                return done(null, rows[0].email) // returning data what I need
            }
            return done(null, false)
        })
        .catch(err => console.log(err))

}));

都很好]

现在，我想保护我的欢迎路线，所以在我的router.js文件中

    const express = require('express');
const router = express.Router();
const passport = require('passport')


const UsersCtrl = require('../controllers/users');

router.use('/login', UsersCtrl.login)
router.use('/welcome',passport.authenticate('jwt',{session:false}))
router.use('/logout', UsersCtrl.logout)


module.exports = router;
假设用户键入localhost:8080/welcome而没有登录，那么我想保护它

所以在我的store.js文件中

• 当用户登录时，我在单击登录时就执行了此操作，并且我已经制定了一种方法getAuthUser，我不知道如何通过此配置来保护我的欢迎文件

这是我完整的store.js代码

    import axios from 'axios'
import jwt from 'jsonwebtoken'

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

    }
    return false
}
export default {
    namespaced: true,
    state: {
        user: null,
        isAuthResolved: false   // this I am calling on my login page i am confused where should I call this or not to call this
    },
    getters: {
        authUser(state) {
            return state.user
        },
        isAuthenticated(state) {
            return !!state.user
        }
    },
    actions: {
        loginWithCredentials({ commit }, userDate) {
            return axios.post('/api/v1/users/login', userDate)
                .then(res => {
                    const user = res.data
                    console.log(user.email)
                    localStorage.setItem('jwt-token', user.token)
                    commit('setAuthUser', user)
                })
        },

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

        },

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

            const config = {  // here what to do with this how can I pass this to protect my route
                headers: {
                    'cache-control': 'no-cache',
                    'Authorization': token
                }
            }

        }

    },
    mutations: {
        setAuthUser(state, user) {
            return state.user = user
        },
        setAuthState(state, authState) {
            return state.isAuthResolved = authState
        }
    }
在我的route.js vue文件中

    import Vue from 'vue'
import Router from 'vue-router'
import store from './store'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
        path: '/welcome',
        name: 'welcome',
        meta: { onlyAuthUser: true },
        component: () =>
            import ('./views/Welcome.vue'),


    }, ]
})
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: 'PageNotAuthenticated' })
                }
            } else if (to.meta.onlyGuestUser) {
                if (isAuthenticated) {
                    next({ name: 'welcome' })
                } else {
                    next()
                }
            } else {
                next()
            }
        })
})

export default router
我的主要问题是我要保护路由并使用jwt和passport进行身份验证，一旦登录我就得到了jwt，并且一旦受保护的路由可以通过后端登录而没有登录时要检查，

在前端（vue.js），我正在使用我的商店文件> getAuthUsers我不知道如何将配置传递给其他路由，例如我的欢迎词

如果有人可以帮助我一些代码流程，将非常有帮助

将提供任何帮助，例如代码流方面的帮助

我只是滞后于代码流，如果我能获得一些我认为可以做到的代码流知识，请任何人

[我正在使用passport-jwt策略来保护我的应用程序中的身份验证用户，一旦登录，我现在就生成一个jwt-token，我想保护我的欢迎页面溃败，以便用户无需登录就无法打开它，所以...

Answer 1

不确定我是否完全理解了您的问题，因为您似乎正确地实现了路由访问。您只需要将路由添加为数组，而其余代码保持不变。