关于登录,从接口到判断到页面

登录接口

public function Login(){
        $input = $this->getinput->json();
        $result = $this->db->where('user_name', $input['user_name'])->where('user_pass', $input['user_pass'])->get('user')->first_row('array');
        if ($result) {
            echo json_encode(array(
                'code' => 0,
                'msg' => '登录成功',
                'data' => $result
            ));
            return;
        }else{
            echo json_encode(array(
                'code' => -100,
                'msg' => '登录失败'
            ));
            return;
        }
    }

界面登录连接口,判断相关内容

login(user_name){
                let self = this;
                if (self.user_name === '') {
                    self.$message.error('请填写姓名');
                } else if (self.user_pass === '') {
                    self.$message.error('请填写密码');
                }else {
                    self.post_on = true;
                    axios.post('<?php echo base_url('Api/Login') ?>', {user_name:self.user_name,user_pass:self.user_pass}).then(function (response) {
                        console.log(response);
                        if (response.data.code === 0) {
                            self.$message.success('登录成功');
                            window.localStorage.setItem('is_login',1);
                            document.getElementById('close_btn').click();
                            window.location.reload();
                            window.location.href="<?= base_url('Center/?lang=' . $_SESSION['lang'] . '&id=') ?>" + user_name
                        } else {
                            self.$message.error('登录失败');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            },

退出登录

  logOut(){
                window.localStorage.setItem('is_login',0);
                window.location.reload();
                window.location.href="<?= base_url('Index') ?>"
            },

因为需要未登录是不能访问个人中心页面,登录后,登录和注册按钮隐藏,显示个人中心和注销以及首页,所以运用v-show显示

<div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="<?php echo site_url('index') ?>" style="text-align: center;"><?=lang('header1')?></a></li>
                    <li v-show="is_login==0"><a href="javascript:showDialog()" style="text-align: center;"><?=lang('header2')?></a></li>
                    <li v-show="is_login==0"><a href="<?php echo site_url('Reg') ?>" style="text-align: center;"><?=lang('header3')?></a></li>
                    <li v-show="is_login==1"><a @click="logOut(user_name)" style="text-align: center;"><?=lang('header5')?></a></li>
                    <li v-show="is_login==1"><a href="<?php echo site_url('Center') ?>" @click="center(user_name)" style="text-align: center;"><?=lang('header4')?></a></li>
                </ul>
            </div>

样式
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="aStar Fashion Template Project">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>钛合电影上传</title>
    <link href="<?php echo base_url('resource/css/bootstrap.min.css') ?>"
          rel="stylesheet" type="text/css">
    <link href="<?php echo base_url('resource/css/swiper.min.css') ?>"
          rel="stylesheet" type="text/css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="<?php echo base_url('resource/js/jquery.js') ?>"></script>
    <script src="<?php echo base_url('resource/js/bootstrap.min.js') ?>"></script>
    <script src="<?php echo base_url('resource/js/swiper.min.js') ?>"></script>
    <script src="http://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="<?php echo base_url('resource/js/axios.min.js') ?>"></script>
    <style>
        html body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        a {
            text-decoration: none;
        }

        ul li {
            d list-style: none;
            padding: 0;
            margin: 0;
        }

        a:hover {
            text-decoration: none;
        }

        .layout_head_box {
            width: 100%;
            position: absolute;
            z-index: 6;
        }

        .layout_head_box /deep/ .navbar-collapse ul li a {
            color: white;

        }

        .layout_head_box /deep/ .navbar-collapse ul li a:hover {
            color: white;
            font-weight: bold;

        }

        /*登陆样式*/
        .ui-dialog {
            width: 450px;
            height: auto;
            display: none;
            position: absolute;
            z-index: 9000;
            top: 0px;
            left: 0px;
            pointer-events: auto;
            /*background: url('*/<?php //echo base_url('resource/banner3.jpg') ?>/*') no-repeat center #fff;*/
            background-size: cover;
            border: 10px solid #3c82bd;
            border-radius: 0.3rem;
            outline: 0;
            color: #fff;
        }

        .ui-dialog a {
            text-decoration: none;
            color: white
        }

        .ui-dialog a:hover {
            color: wheat;
        }

        .ui-dialog-title {
            height: 48px;
            line-height: 48px;
            padding: 0px 20px;
            color: #fff;
            font-size: 18px;
            font-weight: 700;
            background: #3c82bd;
            cursor: move;
            user-select: none;
        }

        .ui-dialog-closebutton {
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            top: 12px;
            right: 20px;
            background: url('<?php echo base_url('resource/close_def.png') ?>') no-repeat;
            cursor: pointer;

        }

        .ui-dialog-closebutton:hover {
            background: url('<?php echo base_url('resource/close_hov.png') ?>');
        }

        .ui-dialog-content {
            padding: 15px 20px;
            background: rgba(0, 0, 0, 0.46);
        }

        .ui-dialog-pt15 {
            padding-top: 15px;
        }

        .ui-dialog-l40 {
            height: 40px;
            line-height: 40px;
            text-align: right;
            margin-top: 10px;
            color: white;
            font-weight: bold;
        }

        .ui-dialog-input {
            width: 100%;
            height: 40px;
            margin: 0px;
            /*padding:0px;*/
            /*border: 1px solid #d5d5d5;*/
            /*font-size: 16px;color: #c1c1c1;*/
            text-indent: 25px;
            outline: none;
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 14px;
            line-height: 1.5;
            color: #111;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        /*.ui-dialog-input-username{*/
        /*    background:url('*/
        <?php //echo base_url('resource/input_username.png') ?> /*') no-repeat 2px;;*/
        /*}*/
        /**/
        /*.ui-dialog-input-password{*/
        /*    background:url('*/
        <?php //echo base_url('resource/input_password.png') ?> /*') no-repeat 2px;;*/
        /*}*/
        .ui-dialog-submit {
            width: 100%;
            height: 50px;
            background: #cd2029;
            border: none;
            font-size: 16px;
            color: #fff;
            outline: none;
            text-decoration: none;
            display: block;
            text-align: center;
            line-height: 50px;
            font-weight: 600;
        }

        .ui-dialog-submit:hover {
            background: #b01f28;
        }

        .ui-mask {
            width: 100%;
            height: 100%;
            background: #000;
            position: absolute;
            top: 0px;
            height: 0px;
            z-index: 8000;
            opacity: 0.4;
            filter: Alpha(opacity=40);
        }

        @media (max-width: 768px) {
            .ui-dialog{
                width:96%;
                margin:0 auto;
                left:0;
            }
            .layout_head_box /deep/ .navbar-toggle {
                float: left;
                margin-left: 15px;
            }

            .layout_head_box /deep/ .navbar-collapse {
                padding: 0;
                background: white;
            }

            .layout_head_box /deep/ .navbar-collapse ul li a {
                color: black;

            }

            .layout_head_box /deep/ .navbar-collapse ul li a:hover {
                color: black;
                font-weight: bold;

            }

            .layout_head_box /deep/ .navbar-nav {
                margin: 7.5px;
            }
        }
    </style>
</head>
<body>
<div id="layout">
<div class="layout_head_box">
    <nav class="navbar navbar-default" role="navigation" style="background:rgba(0,0,0,0);border:none;">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="icon-bar" style="background:#fff"></span>
                    <span class="icon-bar" style="background:#fff"></span>
                    <span class="icon-bar" style="background:#fff"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="<?php echo site_url('index') ?>" style="text-align: center;"><?=lang('header1')?></a></li>
                    <li v-show="is_login==0"><a href="javascript:showDialog()" style="text-align: center;"><?=lang('header2')?></a></li>
                    <li v-show="is_login==0"><a href="<?php echo site_url('Reg') ?>" style="text-align: center;"><?=lang('header3')?></a></li>
                    <li v-show="is_login==1"><a @click="logOut(user_name)" style="text-align: center;"><?=lang('header5')?></a></li>
                    <li v-show="is_login==1"><a href="<?php echo site_url('Center') ?>" @click="center(user_name)" style="text-align: center;"><?=lang('header4')?></a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div class="ui-mask" id="mask" onselectstart="return false"></div>

    <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
        <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
            <?=lang('login')?>
            <a class="ui-dialog-closebutton" href="javascript:hideDialog();" id="close_btn"></a>
        </div>
        <div class="ui-dialog-content">
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input v-model="user_name" class="ui-dialog-input ui-dialog-input-username" type="input" placeholder="<?=lang('account')?>"/>
            </div>
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input v-model="user_pass" class="ui-dialog-input ui-dialog-input-password" type="password" placeholder="<?=lang('password')?>"/>
            </div>
            <div class="ui-dialog-l40"></div>
            <div>
                <div class="ui-dialog-submit" @click="login(user_name)"><?=lang('login')?></div>
            </div>
            <div class="ui-dialog-l40"></div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#layout',
        beforeCreate: function () {

        },
        data() {
            return {
                user_name:'',
                user_pass:'',
                is_login:window.localStorage.getItem('is_login')==undefined?0:window.localStorage.getItem('is_login')
            }
        },
        created: function () {

        },
        mounted: function () {

        },
        methods: {
            logOut(){
                window.localStorage.setItem('is_login',0);
                window.location.reload();
                window.location.href="<?= base_url('Index') ?>"
            },
            //center(){
            //    window.location.href="<?//= base_url('Center/?lang=' . $_SESSION['lang'] . '&id=') ?>//" + user_name
            //},
            login(user_name){
                let self = this;
                if (self.user_name === '') {
                    self.$message.error('请填写姓名');
                } else if (self.user_pass === '') {
                    self.$message.error('请填写密码');
                }else {
                    self.post_on = true;
                    axios.post('<?php echo base_url('Api/Login') ?>', {user_name:self.user_name,user_pass:self.user_pass}).then(function (response) {
                        console.log(response);
                        if (response.data.code === 0) {
                            self.$message.success('登录成功');
                            window.localStorage.setItem('is_login',1);
                            document.getElementById('close_btn').click();
                            window.location.reload();
                            window.location.href="<?= base_url('Center/?lang=' . $_SESSION['lang'] . '&id=') ?>" + user_name
                        } else {
                            self.$message.error('登录失败');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            },
        }

    })
</script>
<?= $content_for_layout ?>
<script>
    //    登陆js
    var dialogInstace, onMoveStartId;  //  用于记录当前可拖拽的对象
    //  获取元素对象
    function g(id) {
        return document.getElementById(id);
    }

    //  自动居中元素(el = Element)
    function autoCenter(el) {
        var bodyW = document.documentElement.clientWidth;
        var bodyH = document.documentElement.clientHeight;
        var elW = el.offsetWidth;
        var elH = el.offsetHeight;
        el.style.left = (bodyW - elW) / 2 + 'px';
        el.style.top = (bodyH - elH) / 2 + 'px';
    }

    //  自动扩展元素到全部显示区域
    function fillToBody(el) {
        el.style.width = document.documentElement.clientWidth + 'px';
        el.style.height = document.documentElement.clientHeight + 'px';
    }

    //  Dialog实例化的方法
    function Dialog(dragId, moveId) {
        var instace = {};
        instace.dragElement = g(dragId);   //  允许执行 拖拽操作 的元素
        instace.moveElement = g(moveId);   //  拖拽操作时,移动的元素
        instace.mouseOffsetLeft = 0;            //  拖拽操作时,移动元素的起始 X 点
        instace.mouseOffsetTop = 0;         //  拖拽操作时,移动元素的起始 Y 点
        instace.dragElement.addEventListener('mousedown', function (e) {
            var e = e || window.event;
            dialogInstace = instace;
            instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft;
            instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop;
            // instace.moveElement.style.zIndex = zIndex ++;
        })
        return instace;
    }

    //  在页面中侦听 鼠标弹起事件
    document.onmouseup = function (e) {
        dialogInstace = false;
        clearInterval(onMoveStartId);
    }
    //  在页面中侦听 鼠标移动事件
    document.onmousemove = function (e) {
        var e = e || window.event;
        var instace = dialogInstace;
        if (instace) {
            var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;
            var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight;
            instace.moveElement.style.left = Math.min(Math.max((e.pageX - instace.mouseOffsetLeft), 0), maxX) + "px";
            instace.moveElement.style.top = Math.min(Math.max((e.pageY - instace.mouseOffsetTop), 0), maxY) + "px";
        }
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    };
    //  拖拽对话框实例对象
    Dialog('dialogDrag', 'dialogMove');

    function onMoveStart() {
    }

    //  重新调整对话框的位置和遮罩,并且展现
    function showDialog() {
        g('dialogMove').style.display = 'block';
        g('mask').style.display = 'block';
        autoCenter(g('dialogMove'));
        fillToBody(g('mask'));
    }

    //  关闭对话框
    function hideDialog() {
        g('dialogMove').style.display = 'none';
        g('mask').style.display = 'none';
    }
</script>

</body>
</html>

在Vue 2中,可以使用axios拦截器来统一处理接口响应的登录失效的数据,并实现跳转到登录页面的功能。 首先,需要安装axios,可以通过以下命令进行安装: ``` npm install axios --save ``` 接下来,在你的项目中创建一个`api`文件夹,并在其中新建一个`http.js`文件。在该文件中,引入axios并进行一些配置,如下所示: ```javascript // api/http.js import axios from 'axios'; // 创建axios实例 const http = axios.create({ baseURL: 'http://your-api-base-url.com', // 设置接口请求的基础URL timeout: 5000 // 设置超时时间 }); // 请求拦截器 http.interceptors.request.use( config => { // 在发送请求之前可以进行一些处理,例如添加请求头等 // config.headers['Authorization'] = 'Bearer ' + token; return config; }, error => { return Promise.reject(error); } ); // 响应拦截器 http.interceptors.response.use( response => { // 在接收到响应数据之后可以进行一些处理,例如判断登录失效等 return response.data; }, error => { // 处理响应错误 if (error.response && error.response.status === 401) { // 登录失效,跳转到登录页面 window.location.href = '/login'; } return Promise.reject(error); } ); export default http; ``` 在这个文件中,我们创建了一个axios实例,并在其中定义了请求拦截器和响应拦截器。在请求拦截器中,你可以进行一些请求相关的处理,例如添加请求头等;在响应拦截器中,我们判断了响应状态码是否为401,如果是,则表示登录失效,将会跳转到登录页面。 接下来,在需要发起接口请求的地方,将使用到这个axios实例。例如,在一个`userService.js`文件中,我们定义了一个登录接口的方法: ```javascript // api/userService.js import http from '@/api/http'; export function login(username, password) { return http.post('/login', { username, password }); } ``` 在上述代码中,我们通过`http`实例来发起请求。当登录接口返回401状态码时,拦截器会自动跳转到登录页面。 请注意,以上代码只是一个示例,你需要根据你的实际情况进行相应的修改和调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值