vue 用户登录及token验证

1.登录页面

        

      页面布局

<template>
  <div class="login">
    <div class="login_form">
      <p>后台管理系统</p>
      <el-tabs v-model="activeName" @tab-click="handleClick" >
        <el-tab-pane label="登录" name="first">
          <el-form
            :model="loginForm"
            :rules="rules"
            ref="loginForm"
            
          >
            <el-form-item label="" prop="name" class="elItem">
              <el-input
                type="text"
                autocomplete="off"
                v-model="loginForm.name"
                prefix-icon="el-icon-user-solid"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input
                type="password"
                autocomplete="off"
                v-model="loginForm.password"
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" @click="goToLogin('loginForm')">登录</el-button>
              <el-button @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="second">
          <register></register>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
//引入 login 登录接口
import {login} from './../api/login/login'
//引入注册组件
import register from '@/components/register';
export default {
  data() {
    return {
      loginForm: {
        name: "",
        password: "",
      },
      activeName:'first',//默认登录页面
      rules: {
        name: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    goToLogin() {
      this.$refs["loginForm"].validate( (valid) => {
        if(valid){
          login(this.loginForm).then(res=>{
            if(res.message == 'ok'){
              this.$message.success('登陆成功')
              sessionStorage.setItem('token',res.token)//存储token
              this.$router.push('/home')//验证成功后跳转到home页面
            }else{
              this.$message.error(res.message)
            }
          })
        }else{
          this.$message.error('登录失败')
          return false
        }
      });
    },
    resetLoginForm() {
      this.$refs["loginForm"].resetFields();
    },
    handleClick(){}
  },
  components:{
    register
  }
};
</script>

<style scoped lang='less'>
.login {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/login/login.jpg");
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  position: relative;
  .login_form {
    width: 400px;
    height: 360px;
    position: absolute;
    left: 78%;
    top: 50%;
    margin-left: -200px;
    margin-top: -150px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #ddd;
    .btns {
      display: flex;
      justify-content: flex-end;
    }
  }
  p {
    font-size: 24px;
    text-align: center;
    font-weight: 600;
  }
}
</style>

         登录成功后端返回数据

                

 2.获取的token存储到vuex中

                      

         在main.js中引入store

        store>index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
const store = new Vuex.Store({
  state: {
    // 存储token
    Authorization: sessionStorage.getItem('Authorization') ?sessionStorage.getItem('Authorization') : ''
  },
 
  mutations: {
    // 修改token，并将token存入sessionStorage
    changeLogin (state, user) {
      state.Authorization = user.Authorization;
      sessionStorage.setItem('Authorization', user.Authorization);
    }
  }
});
 
export default store;

3.axios拦截（在src文件下新建utils文件夹--->request.js）

import axios from 'axios'

// 环境的切换
if (process.env.NODE_ENV === 'development') {
 axios.defaults.baseURL = '/api'
} else if (process.env.NODE_ENV === 'production') {
 axios.defaults.baseURL = 'http://114.113.127.115:9082/api'
}

// 请求拦截器
axios.interceptors.request.use(
 config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token
    const token = sessionStorage.getItem('token');        
    token && (config.headers.Authorization = token) 
    return config
 },
 error => {
 return Promise.error(error)
 })

axios.defaults.timeout = 60000

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 响应拦截器
axios.interceptors.response.use(response => {
 if (response.status === 200) {
 return Promise.resolve(response)
 } else {
 return Promise.reject(response)
 }
}, error => {
 if (error.response.status) {
 // 对不同返回码对相应处理
 return Promise.reject(error.response)
 }
})

// get 请求
export function httpGet({
 url,
 params = {}
}) {
 return new Promise((resolve, reject) => {
 axios.get(url, {
  params
 }).then((res) => {
  resolve(res.data)
 }).catch(err => {
  reject(err)
 })
 })
}
//delete 请求
export function httpDelete({
    url,
    data ={}
}) {
    return new Promise((resolve)=>{
        axios({
            url,
            method:"delete",
            data
        }).then((res)=>{
            resolve(res.data)
        })
    })
}

// post请求
export function httpPost({
 url,
 data = {},
 params = {}
}) {
 return new Promise((resolve) => {
 axios({
  url,
  method: 'post',
  transformRequest: [function (data) {
  let ret = ''
  for (let it in data) {
   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
  }],
  // 发送的数据
  data,
  // url参数
  params

 }).then(res => {
  resolve(res.data)
 })
 })
}

//put请求
export function httpPut({
    url,
    data = {},
    params = {}
   }) {
    return new Promise((resolve) => {
    axios({
     url,
     method: 'put',
     transformRequest: [function (data) {
     let ret = ''
     for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
     }
     return ret
     }],
     // 发送的数据
     data,
     // url参数
     params
   
    }).then(res => {
     resolve(res.data)
    })
    })
   }

4.路由拦截

 在router文件夹下>index.js添加

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    redirect:'/login'
  },
  {
    path:'/login',
    component:()=>import('@/components/Login.vue')
  },
  {
    path: '/home',
    name: 'Home',
    redirect:'/news',
    component: Home,
    children:[
      { path:'/news',name:'News',component:() =>import('@/views/News/News.vue') },
      { path:'/notice',name:'Notice',component:() =>import('@/views/Notice/Notice.vue') }
    ]  
  },
]
const router = new VueRouter({
  routes
})
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {//若要跳转的页面时login页面直接跳转
    next();
  } else {
    let token = sessionStorage.getItem('token');//获取本地token
    if (token == null || token == '') {//若token值为空则跳转到登录页面
      next('/login');
    } else {
      next();
    }
  }
});

export default router