vue权限验证

最新推荐文章于 2023-12-14 00:16:45 发布

好先

最新推荐文章于 2023-12-14 00:16:45 发布

阅读量695

点赞数

分类专栏： vue 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/weixin_59719549/article/details/123834307

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <script src="./vue-router.js"></script>
    <script src="./vuex.js"></script>
</head>
<body>
<!-- 
    用户角色 role
        普通用户  v1 v2 v3 admin
        normal  v1 v2 v3 admin
 -->
<div id='app'>
    <router-link to="/">首页</router-link> |
    <router-link to="/personal">个人中心</router-link> |
    <router-link to="/usermanager">用户管理</router-link> |
    <router-link to="/login">登录</router-link> 

    <hr>

    <router-view></router-view>
</div>
</body>
<script>

    let Index={
        template:`
            <div>
                <h1>首页</h1>    
            </div>
        `
    }
    let Personal={
        template:`
            <div>
                <h1>个人中心</h1>    
                <h2 v-if="this.$store.state.role=='admin'">admin才能看到</h2>
                <h2 v-if="this.$store.state.role=='v1'">v1才能看到</h2>
                <h2 v-if="this.$store.state.role=='v2'">v2才能看到</h2>
            </div>
        `
    }
    let UserManager={
        template:`
            <div>
                <h1>用户管理</h1>    
            </div>
        `
    }

    let Login={
        template:`
            <div>
                <input placeholder="角色" v-model="role"/>
                <button @click="submit">登录</button>    
            </div>
        `,
        data(){
            return{
                role:""
            }
        },
        methods:{
            submit(){
                // 后端给的
                localStorage.setItem("token","xsdfferf");
                localStorage.setItem("role",this.role);
                // 更新公共状态
                this.$store.commit("setLoginStatus",{
                    token:"sfsddfdsfsd",
                    role:this.role
                })
            }
        }
    }

    let router=new VueRouter({
        routes:[{
            path:"/",
            component:Index
        },{
            path:"/personal",
            component:Personal,
            meta:{
                needLogin:true,
                access:["normal","v1","v2","admin"]
            }
        },{
            path:"/usermanager",
            component:UserManager,
            meta:{
                needLogin:true,
                access:["admin"]
            }
        },{
            path:"/login",
            component:Login
        }]
    })


    // 路由拦截
    router.beforeEach((to,from,next)=>{

        if(to.meta.needLogin){//需要登录
            
            if(store.state.token){//登录了

                // 验证角色
                let role=store.state.role;
                if(to.meta.access.includes(role)){
                    next();
                }else{
                    alert("没有权限");
                    next(false);
                }

            }else{//未登录
                next("/login")
            }

        }else{
            // 放行
            next();
        }

    })


    let store = new Vuex.Store({
        state:{
            token:localStorage.getItem("token"),
            role:localStorage.getItem("role")
        },
        mutations:{
            setLoginStatus(state,a){
                state.token=a.token;
                state.role=a.role;
            }
        }
    })
    

    var app=new Vue({
        el:'#app',
        router,
        store,
        data:{
            
        }
    })
</script>
</html>

好先

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue权限验证

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Doc
复制链接

扫一扫