美文网首页
Vue-登录后才可以执行操作

Vue-登录后才可以执行操作

作者: Christoles | 来源:发表于2019-04-28 00:47 被阅读0次

    Login.vue:

    • 1、输入账号和密码后,点击登录,axios发送post请求对接登录接口,会将输入的账号和密码作为参数传给后台;
    • 2、后台会验证传过来的账号密码是否正确,正确的话会返回一个token值作为身份证,错误的话则没有token值;
    • 3、此时将返回来的token作为全局变量放在store.js里面,使用this.$store.commit("setToken",{token:res.data.token})方法;之后的请求数据都需要用这个身份作为请求头header验证操纵数据。
    • 4、判断该token值,如果不为undefined的话(即是拿到了身份验证码),就将该token值存在缓存中,用sessionStorage.setItem('token',this.store.state.token);方法; 并且将Login.vue页面不渲染(isLogin=true),导航也显示(isToken),路由也跳转到首页,用编程式导航 this.router.replace({name: "home"});
    • 5、退出登录的时候,渲染Login.vue组件,清除缓存身份验证码,返回到登录页面。

    App.vue:


    isLogin = false;
    sessionStorage.removeItem("token");
    this.$router.push({path:'/'});

    <template>
        <div id="app">
            <el-container v-if="isLogin||isToken"></el-container>
            <login v-if="isLogin==false&&isToken==null" @toparent="getson"></login>
        </div>
    </template>
    

    相关文章

      网友评论

          本文标题:Vue-登录后才可以执行操作

          本文链接:https://www.haomeiwen.com/subject/zzcrnqtx.html