vue.js点击判断是否已经登录

柔光的暖阳◎ 2021-07-25 23:23 447阅读 0赞

首先在定义路由的时候就需要多添加一个自定义字段`requireAuth`，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，   
否则就进入登录页面。

{
          path: '/shops/users',
          name: 'Users',
          meta: {
              title: '用户中心',
              requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
          },
          component: Users
    }

定义完路由后，在main.js我们主要是利用`vue-router`提供的钩子函数`beforeEach()`对路由进行判断。

router.beforeEach((to, from, next) => {
        if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
            if (localStorage.getItem('BASEINFO')) {  // 通过vuex state获取当前的用户是否存在
                next();
            }
            else {
                next({
                    path: '/shops/login',
                    query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
                })
            }
        }
        else {
            next();
        }
    })

[https://router.vuejs.org/zh/guide/\#javascript][https_router.vuejs.org_zh_guide_javascript]

[https_router.vuejs.org_zh_guide_javascript]: https://router.vuejs.org/zh/guide/#javascript

发表评论取消回复

表情：

评论列表（有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

相关 matplotlib 判断鼠标是否点击在当前线上

系列文章目录 -------------------- 文章目录系列文章目录前言一、背景知识二、实现步骤 1.导入所需

川长思鸟来/ 2023年10月14日 17:03/ 0 赞/ 27 阅读

相关 Spring Security判断用户是否已经登录

原创地址：https://www.jianshu.com/p/70569b64f9a9 方法一、JSP中检查user principal <c:if test="$

心已赠人/ 2023年06月10日 10:28/ 0 赞/ 25 阅读

相关 jQuery判断点击事件是否位于div之外

点击效果： ![20191014173722590.gif][] HTML <div id="outer"> <div id="inner" st

Myth丶恋晨/ 2023年06月07日 10:57/ 0 赞/ 25 阅读

相关 php 点功能判断是否登录,php判断是否登录

index.php session\_start(); if(isset($\_SESSION\["name"\])&&time()>$\_SESSION\['name'\

Bertha 。/ 2023年01月19日 07:07/ 0 赞/ 183 阅读

相关鼠标点击 php,php怎么判断鼠标是否点击了a标签

php如何判断鼠标是否点击了a标签比如鼠标点击了a标签的时候就调用php的 echo "i"; 这样要怎么做为什么网上找不到php的事件代码求高手帮忙写下 P

逃离我推掉我的手/ 2022年11月17日 14:47/ 0 赞/ 392 阅读

相关 Android——判断Service是否已经启动

延续百度地图定位的Demo，采用Service来进行百度定位，并且将数据上传到服务器上遇到了一个问题：在真机中使用清理内存来关闭程序的之后，Service会

旧城等待，/ 2022年08月11日 03:30/ 0 赞/ 615 阅读

相关 Javascript 判断 timeout 是否已经结束

第一个例子，创建包裹函数： function Timeout(fn, interval) { var id = setTimeout(fn, inte

Dear 丶/ 2022年05月03日 16:00/ 0 赞/ 385 阅读

相关 vuejs点击获取当前元素内容

有时候要获取所点击元素的内容文本等信息可以在点击事件里面加上$event，这样即可获取。注意，一定是$event，不然无效,如果只有一个参数可以不写$event,直接

超、凢脫俗/ 2022年05月03日 07:58/ 0 赞/ 623 阅读

相关判断是否已经存在该数据

/ 修改角色（可以判断是否已经存在角色代码） @param role @return / @PostMappi

矫情吗；*/ 2022年02月21日 08:21/ 0 赞/ 271 阅读

相关 vue.js点击判断是否已经登录

首先在定义路由的时候就需要多添加一个自定义字段`requireAuth`，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。

柔光的暖阳◎/ 2021年07月25日 23:23/ 0 赞/ 448 阅读