路由守卫 store 登录

router.beforeEach((to, from, next) =>  {
  if(to.path === "/login"){
    next()
  }else{
    let token = localStorage.getItem('Authorization');
    if(token === null || token === ""){
      next('/login')
    }else{
      next()
    }
  }
})

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
user:{},
// 存储token
Authorization: localStorage.getItem(‘Authorization’) ? localStorage.getItem(‘Authorization’) : ‘’

},
mutations: {
changeLogin(state,user){
state.Authorization =user.Authorization;
localStorage.setItem(‘Authorization’, user.Authorization)
}

},
actions: {
},
modules: {
},
getters:{//监听数据变化
getStorage(state){ // 获取本地存储的登录信息
if(!state.token){
state.token =JSON.parse(localStorage.getItem())
}
return state.token
}

}
})
// 存储localstorage
export const setStore = (key, data) => {
//存储之前先清除这样保持始终只有一个账户的信息
window.localStorage.clear();
//定义一个时间，用来设置过期则清除
let curTime = new Date().getTime();
//存储数据和存储时间
let setdata = {
data: data,
time: curTime,
};
//将数据存储为字符串类型
setdata = JSON.stringify(setdata)
window.localStorage.setItem(key, setdata)
// console.log(setdata)
}

//获取locastorage
export const getStore = () => {
// 对当前的localStorage进行遍历查找数据
if (localStorage.length > 0) {
for (let i = 0; i < localStorage.length; i++) {
let keyname = localStorage.key(i);
let str = localStorage.getItem(keyname);
str = JSON.parse(str)
//对时间进行比较看是否过期
let curTime = new Date().getTime();
let tiem = 7 * 24 * 60 * 60 * 1000;
if (curTime - str.time > tiem) {
window.localStorage.clear();
} else {
return str.data
}
}
}
}
import axios from “axios”;
import {
Message
} from “element-ui”;
import Vue from ‘vue’;
axios.defaults.timeout = 5000;
axios.defaults.baseURL = ‘http://192.168.3.164:xxx’;
const {
$message
} = Vue.prototype;
//http request 拦截器
axios.interceptors.request.use(
//在发送请求之前做了什么
config => {
console.log(config)
// if(localStorage.getItem(“token”)){
// config.headers.Authorization = localStorage.getItem(“token”);//把localStorage的token放在Authorization里
// }
// config.headers[‘x-token’] = localStorage.getItem(‘token’);
//const token = localStorage.getItem(‘token’)
// if (token) {
// token ? config.headers.Authorization = token : null;
// }
if(localStorage.getItem(‘Authorization’)){
config.headers.Authorization = localStorage.getItem(‘Authorization’);
}
return config;
},
error => {
return Promise.reject(error)
}

);
// http response 拦截器
// axios.interceptors.response.use(
// response => {
// if (response.data === 401) {
// if (response.data == 10001) {
// Message({
// message: ‘token不存在或已过期，请重新登录’,
// type: ‘warning’,
// duration: 2000
// });
// }
// this.$router.replace(’/login’);
// localStorage.removeItem(‘token’)
// }
// return response;
// },
// error => {
// Message({
// message: error.message,
// type: ‘error’,
// duration: 2000
// })
// return Promise.reject(error) // 返回接口返回的错误信息
// })
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}

export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
export function put(url,data={}){
return new Promise ((resolve,reject)=>{
axios.put(url,data).then(response=>{
resolve(response.data)
},error=>{
reject(error)
})
})
}
// function http(method, url, data = {}) {
// let configData = {};
// let type = method === ‘get’ ? ‘params’ : ‘data’
// configData.method = method;
// configData.url = url;
// configData[type] = data;
// configData.headers = {
// versions: ‘1.0.0’,
// source: ‘’
// }
// }
// return axios(configData).catch(err => {
// if (err.response.status === 500) return $message.error(‘服务器错误’)
// if (err.response.status === 404) return $message.error(‘接口不存在’)
// })

登录页

 

          <!-- 验证码 -->
          <div style="display: flex">
            <input
              type="text"
              v-model="val"
              style="width: 100px; margin-left: 10%; margin-top: 5px"
            />

            <FoxGVCode ref="imgCode" style="" />
          </div>
          <!-- `checked` 为 true 或 false -->
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <FormItem>
            <Button type="info" @click="submitForm('formName')"
              >登录</Button
            >
          </FormItem>
        </Form>
        <div class="ft">
          <router-link to="/Signin">没注册,马上注册</router-link
          >&nbsp;&nbsp; &nbsp;<router-link
            to="/ChangePassword"
            style="margin-left: 2px"
            >设置新密码</router-link
          ><router-link to="/student/studentlogin" style="margin-left: 10px"
            >学生</router-link
          ><router-link
            to="/teacher/teacher/login"
            style="margin-left: 10px"
            >老师</router-link
          >
        </div>
      </Card>
    </Col>
  </Row>
</main>
<footer>
  <Footer style="margin-top:20px" />
</footer>