vue项目实现登录(sessionStorage 存储 token)

前提参考：vue项目封装axios

思路：
// 1, 前端校验，校验成功后向后台传用户名和密码（每次请求接口都要传 token）
// 2， 后端收到请求，验证用户名和密码，验证成功，生成 token 返回给前端
// 3， 前端拿到token，将token存储到sessionStorage
// 4， 跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
// 5， 后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
// 6， 如果前端拿到状态码为401/退出登录，就清除token信息并跳转到登录页面

request.js

//http request 拦截器
instance.interceptors.request.use(
    config => {
        let token = sessionStorage.getItem('token')
        if(token == null){
            // 首次登录
            config.headers.client_id = 'jeecp'
            config.headers.client_secret = 'webApp'
        }else{
            config.headers.Authorization = 'Bearer '+ token
        }
        return config
    },
    err => {
        return Promise.reject(err)
    }
)

api.js

// 登录
    loginInfor(Information){
      return post('/api-auth/oauth/user/token' ,
        {
          username: Information.username,
          password: Information.password,
        }
      )
    },

登录前端页面

<template>
  <el-container id="login">
    <el-aside width="70%">
        <p class="welcome">智能环境照明子系统欢迎您</p>
    </el-aside>
    <el-main>
        <p>智能环境照明子系统</p>
        <el-form ref="Form" :model="loginForms" :rules="loginRules" label-width="80px">
            <el-form-item prop="username">
                <el-input v-model="loginForms.username">
                    <template slot="prepend"><i class="el-icon-user"></i></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForms.password">
                    <template slot="prepend"><i class="el-icon-goods"></i></template>
                </el-input>
            </el-form-item>
            <el-button round @click.native.prevent="submit">登陆</el-button>
        </el-form>
    </el-main>
  </el-container>
</template>
<style scoped>
#login{
    width: 100%;
    height: 100%;
}

#login .el-aside{
    height: 100%;
    background-image: url('~@/assets/img/login_bg.png');
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#login .el-aside .welcome{
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 49%;
    transform: translateX(-50%);
    font-size: 40px;
    color: #fff;
}
#login .el-main{
    padding: 0;
    background-color: rgba(77, 120, 223, 1);
}
#login .el-main p{
    color: #fff;
    font-size: 30px;
    margin-top: 45%;
    margin-bottom: 10%;
}

#login .el-main .el-input-group{
    width: 70%;
    /* margin: 0 15% 30px 15%; */
}
#login .el-main .el-button{
    width: 35%;
    color: rgba(77, 120, 223, 1);
}
@media screen and (min-width: 1600px) and (max-width: 1920px) {
    #login .el-main p{
        margin-top: 67%;
    }
}
@media screen and (min-width: 1400px) and (max-width: 1600px) {
    #login .el-main p{
        margin-top: 65%;
    }
}
</style>
<style>
*{
    padding: 0;
    margin: 0;
}
</style>
<script>
import $ from "jquery"
export default {
  data (){
      return {
          loginForms:{
              username: 'fox',
              password: '123456'
          },
          loginRules: {
            username: [
            { required: true, trigger: 'blur', message: '用户名不能为空' }
            ],
            password: [
            { required: true, trigger: 'blur', message: '密码不能为空' }
            ]
          }
      }
  },
  mounted() {
      $('#app').height($(window).height())
      $('.el-form-item__content').css("margin-left", "0")
  },
  methods: {
      // 重置登录表单
      resetLoginForm() {
        this.$refs.Form.resetFields()
      },
      // 登录
      submit(){
          this.$router.push("/index");
            // 测试表单数据校验  Form  要和 表单的ref的名称一致
           this.$refs.Form.validate(valid => {
                // console.log('校验结果: ' + valid)
                if (!valid) {
                    console.log("参数验证失败")
                    return
                }
                // 校验成功
                this.$api.loginInfor(this.loginForms).then(res => {
                    // console.log('请求结果：', res)
                    if (res.code !== '000000') {
                        // console.log("登录失败")
                        return
                    }else{
                        console.log("token", res.data.access_token)
                        // token放入 sessionStorage
                        window.sessionStorage.setItem('token', res.data.access_token)
                        // 跳转到首页
                        this.$router.push({path: "/index"});
                    }
                    
                }).catch(err => {
                    console.log(err)
                })
            })
      }
  }
}
</script>

路由 index.js

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 从哪里跳转来
  // next 放行
  //跳转到登录页面直接放行
  if (to.path === '/login') {
    next();
  } 
  else {
    // 获取token,看是否有token,有token放行
    const token = window.sessionStorage.getItem("token")
    if (!token) {
      next('/login')
      return;
    } else{
      // 放行
      next();
    }
    
  }
});