简单用户管理系统（P-12）

实现登陆获取token，路由守卫，很token处理

其实页面跟注册页面有点类似，看起来也比较简单

image.png

<template>
    <div class="login">
        <section class="form-container">
            <div class="manage-tip">
                <span class="title">后台管理系统</span>
            </div>
            <el-form :model="loginUser" :rules="rules"  ref="loginForm" class="loginForm" label-width="60px">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="loginUser.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginUser.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="submitForm('loginForm')" class="submit-btn">登 录</el-button>
                </el-form-item>
                <div class="tiparea">
                    <p>现在还没有账号？赶紧 <router-link to="./register">注册</router-link>一个吧！</p>
                </div>
            </el-form>
        </section>
    </div>
</template>

在验证阶段可以,非处理性的验证尽早返回，保存token

this.$refs['loginForm'].validate( valid => {
                    if(!valid) return false;

                    this.$axios.post('/api/users/login', this.loginUser).then(res => {
                        if (res.data.code === 0) {
                            this.$message({
                                message: "登陆成功",
                                type: "success"
                            });
                            const { token } = res.data; // 保存token

                            localStorage.setItem('eleToken', token);
                            
                            // this.$router.push('./index'); // 跳转首页
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(error => {
                        this.$message({
                            message: "登陆失败!",
                            type: "error"
                        });
                    });
                    
                })

处理token，防止路由随意跳转

// 路由守卫，防止未登录跳转，判断是否登陆注册页
router.beforeEach( (to, from ,next) => {
    const isLogin = localStorage.eleToken ? true : false;
    if( to.path == '/login' || to.path == '/register') { // 要访问的页面
        next();
    } else {
        isLogin ? next() : next('/login');
    }
})

这里的token请求验证，需要到axios请求拦截里处理
还有我们需要爱http中去更改
请求头

// 请求拦截   在请求或响应被 then 或 catch 处理前拦截它们。
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    startLoading();
    // 设置统一的请求头header
    config.headers.Authorization = localStorage.eleToken ? localStorage.eleToken : ''; 
    return config;
}, error => {
    // 对响应错误做点什么, 移除拦截器
    return Promise.reject(error);
});

// 响应拦截
axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    endLoading();
    return response;
}, error => {
    // 对响应错误做点什么
    endLoading()
    Message.error(error.response.data);

    const { status } = error.response;
    if (status == 401) { // 未经授权的错误
        Message.error('token值无效, 请重新登陆')

        // 清楚token
        localStorage.removeItem('eleToken');

        router.push('/login'); // 跳转到登陆页
    }

    return Promise.reject(error);
});