Question

我现在正在建立一个水疗中心，它使用Vue.js作为前端框架，它与使用jsonwebtokens的纯json后端对话。我对React生态系统更熟悉。我目前还不确定如何保护Vue.js中的客户端路由。（不是我对框架的决定。我是新员工。是的！）

在反应中我会做这样的事情。在项目的index.js文件中。在应用程序安装之前，检查localstorage中是否存在jsonwebtoken。如果有，请将redux状态设置为登录。如果未设置为已注销。

然后我会使用更高阶的组件来保护我的路由，以便每当用户尝试进入客户端保护路由时，我会使用componentWillMount生命周期方法来检查登录状态。如果登录则渲染组件。否则重定向到登录页面。

似乎vue中的高阶组件无法实现相同的行为。或者我只是找不到向我展示如何实现它的文档。有人可以和我分享他们如何解决这个问题吗？

Answer 1

如documentation中所述，您可以在要检查身份验证的所有路由上使用元字段

文档中提供的示例：

<!DOCTYPE html>
<html>

<head>
    <title>rectangles sucks</title>
</head>

<body>

    <button id="buttonxD">press me!</button>
    <script>
        var body = document.getElementsByTagName("body")[0];
        var canvas = document.createElement("canvas");
        canvas.height = 500;
        canvas.width = 500;
        var context = canvas.getContext("2d");
        body.appendChild(canvas);

        var rects = [];

        function create() {
            //  Opacity
            context.globalAlpha = 0.7;
            var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
            context.fillStyle = color;

            //Each rectangle's size is (20 ~ 100, 20 ~ 100)
            var coordx = Math.random() * canvas.width;
            var coordy = Math.random() * canvas.width;
            var width = Math.random() * 80 + 20;
            var height = Math.random() * 80 + 20;

            var rect = {
                x: coordx,
                y: coordy,
                w: width,
                h: height
            }

            var ok = true;
            rects.forEach(function (item) {
                if (isCollide(rect, item)) {
                    console.log("collide");
                    ok = false;
                } else {
                    console.log("no collision");
                }
            })

            if (ok) {
                context.fillRect(coordx, coordy, width, height);
                rects.push(rect);
            } else {
                console.log('rect dropped');
            }

            console.log(rects);

        }

        function isCollide(a, b) {
            return !(
                ((a.y + a.h) < (b.y)) ||
                (a.y > (b.y + b.h)) ||
                ((a.x + a.w) < b.x) ||
                (a.x > (b.x + b.w))
            );
        }
        document.getElementById('buttonxD').addEventListener('click', create);
    </script>

</body>

</html>

或者对于组件导航保护，您可以按照wostex提供的第二个链接

Answer 2

我想我错过了路线meta领域的文档。我想做些蠢事，但我想工作。哈哈。

router.beforeEach((to, from, next) => {
    let web = ["home", "login", "verifyAccount", "resetPassword","forgotPassword","register"];
    if(web.includes(to.name)){
        next();
    }else{
        axios.post('/api/auth/verify-token',{
            token: localStorage.token
        }).then(response=>{
            if(response.data.verification === true){
                next();
            }else{
                router.push({
                    name:'home',
                    params:{
                        serverError:true,
                        serverMsg: 'Please login to continue.'
                    }
                });
            }
        }).catch(response=> {
            console.log(response);
        });
    }
});

Answer 3

这是使用Vue.js进行身份验证实现的一个很好的示例：link

更具体地说，这里是关于nav的手册。警卫：link

如何在Vue.js中保护客户端路由？

3 个答案: