vue项目添加进入页面之前判断用户是否登录功能

发布时间:2022-5-26 14:13

在用户想要访问需要权限的界面,例如后台界面时候,应该首先要判断用户是否拥有权限,有则进入,无则跳转。

比如,有人要访问我的后台界面,这些对外是不开放的,如果是管理员访问则,没登录之前直接跳转到管理员登录界面。

访问后台界面
访问后台界面

没有权限,跳转登录
没有权限,跳转登录

// router.ts
{
     path: "userManage", name: "userManage",
     component: () => import('@/components/xxx.vue'),
     meta: { requireAuth: true },  // look here
     children: [……]
 }

然后在main.ts里添加一个全局路由守卫大哥,拦截所有地址栏请求:

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 需要权限
        //判断当前是否拥有权限
        if (localStorage.getItem('xxx')) {
            next();
        } else {  // 无权,跳转登录
            next({
                path: '/userLogin',
                query: { redirect: from.fullPath }
            })
        }
    } else {  // 不需要权限,直接访问
        next();
    }
})

就是这么简单。

注意:权限标识不用放到每个子路由里面,这样可以拦截所有的子路由页面。如果不想要拦截某些子路由,则可以在这个子路由上设置另一个标识,在全局守卫判断时添加此判断即可。

Vue PostCSS的使用介绍 网站建设

Vue PostCSS的使用介绍

postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如: 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成rem ...
Vue package.json配置深入分析 网站建设

Vue package.json配置深入分析

package.json是每个前端项目都会有的json文件,位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json。package.json有许多配置与项目息息相...