实现不同用户登录显示不同页面

实现不同用户登录显示不同页面

$(function(){
    var e = getCookie("seller_key");
    // 判断是否有登录
     if (!e) {
         location.href = "login.html"
     }
    if (getQueryString('seller_key') != '') {
        var key = getQueryString('seller_key');
        var seller_name = getQueryString('seller_name');
        addCookie('seller_key', key);
        addCookie('seller_name', seller_name);
    } else {
        var key = getCookie('seller_key');
        var seller_name = getCookie('seller_name');
    }
    if(key && seller_name){
        $.ajax({
            type:'post',
            url:ApiUrl+"/index.php?act=seller_index",
            data:{key:key},
            dataType:'json',
            success:function(result){
                checkSellerLogin(result.login);
                var html = ''
                    + '<div class="member-info">'
                        + '<div class="user-avatar"><img src="' + result.datas.store_info.store_avatar + '"/></div>'
                        + '<div class="user-name"><span>'+result.datas.seller_info.seller_name+'</span></div>'
                    + '</div>';
                $(".member-top").html(html);
                return false;
            }
        });
    } else {
        // 未登录显示
        delCookie('seller_key');
        delCookie('seller_name');
        delCookie('store_name');
        var html = ''
            + '<div class="member-info">'
                + '<a href="login.html" class="default-avatar" style="display:block;"></a>'
                + '<a href="login.html" class="to-login">点击登录</a>'
            + '</div>';
        $(".member-top").html(html);
        return false;
    }
})

封装的函数

function getQueryString(e) {
    //正则去除特殊符号
    var t = new RegExp("(^|&)" + e + "=([^&]*)(&|$)");
    //location.search是从当前URL的?号开始的字符串 
    //如:http://www.runoob.com/try/try.php?filename=tryjsref_search 它的search就是?   filename=tryjsref_search
    //substr(1)去掉?匹配后面的信息
    var a = window.location.search.substr(1).match(t);
    if (a != null) return a[2];
    return ""
}
function addCookie(e, t, a) {
    var n = e + "=" + escape(t) + "; path=/";
    if (a > 0) {
        var r = new Date;
        r.setTime(r.getTime() + a * 3600 * 1e3);
        n = n + ";expires=" + r.toGMTString()
    }
    document.cookie = n
}
function getCookie(e) {
    var t = document.cookie;
    var a = t.split("; ");
    for (var n = 0; n < a.length; n++) {
        var r = a[n].split("=");
        if (r[0] == e) return unescape(r[1])
    }
    return null
}
function delCookie(e) {
    var t = new Date;
    t.setTime(t.getTime() - 1);
    var a = getCookie(e);
    if (a != null) document.cookie = e + "=" + a + "; path=/;expires=" + t.toGMTString()
}
实现不同用户登录显示不同页面,可以通过以下步骤: 1. 在后端实现用户登录验证,返回用户的角色信息。 2. 在前端使用路由守卫(router guard),根据用户角色信息进行路由拦截。 3. 根据用户角色信息,动态生成菜单导航和页面内容。 具体实现步骤如下: 1. 实现用户登录验证 在后端实现用户登录验证,可以使用常见的身份验证方式,例如使用用户名和密码进行验证,或者使用单点登录(SSO)等验证方式。验证成功后,需要返回用户的角色信息,例如管理员、普通用户等。 2. 使用路由守卫进行路由拦截 在前端使用路由守卫(router guard),可以拦截用户访问受限页面的请求,根据用户角色信息进行路由拦截。可以在全局路由中注册路由守卫,也可以在需要进行权限控制的路由中注册路由守卫。 例如,以下代码演示了在全局路由中注册路由守卫的实现方式: ```javascript // main.js import router from './router' router.beforeEach((to, from, next) => { const role = sessionStorage.getItem('role') if (!role && to.path !== '/login') { next('/login') } else if (to.meta.permission && !to.meta.permission.includes(role)) { next('/403') } else { next() } }) ``` 以上代码中,使用了 `beforeEach` 方法注册了全局路由守卫。在路由跳转之前,判断用户是否登录,如果未登录则跳转到登录页面;如果已登录,则根据用户角色信息判断是否有访问该页面的权限,如果没有则跳转到 403 页面。 3. 根据用户角色信息动态生成菜单导航和页面内容 根据用户角色信息,在前端动态生成菜单导航和页面内容。可以使用 Vue Router 中的嵌套路由(nested routes)实现不同角色用户看到不同的菜单导航和页面内容。 例如,以下代码演示了使用嵌套路由实现不同角色用户看到不同的菜单导航和页面内容的实现方式: ```javascript // router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ routes: [ { path: '/', component: () => import('@/views/Home.vue'), children: [ { path: 'dashboard', component: () => import('@/views/Dashboard.vue'), meta: { permission: ['admin'] } }, { path: 'profile', component: () => import('@/views/Profile.vue'), meta: { permission: ['admin', 'user'] } } ] }, { path: '/login', component: () => import('@/views/Login.vue') }, { path: '/403', component: () => import('@/views/Forbidden.vue') }, { path: '*', component: () => import('@/views/NotFound.vue') } ] }) export default router ``` 以上代码中,使用了嵌套路由(nested routes)实现不同角色用户看到不同的菜单导航和页面内容。在父级路由中定义了公共的页面布局,子路由根据用户角色信息动态生成页面内容。 例如,当用户角色为管理员时,访问 `/dashboard` 路由时会显示管理员专属的页面内容;当用户角色为普通用户时,访问 `/profile` 路由时会显示普通用户专属的页面内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值