Inicio de sesión en la tienda de Route Guard

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

importar Vue desde 'vue'
importar Vuex desde 'vuex'

Vue.use (Vuex)

exportar el nuevo Vuex.Store predeterminado ({ estado: { usuario: {}, // 存储autorización del token : localStorage.getItem ('Autorización')? localStorage.getItem ('Autorización'): ''

},
mutaciones: { changeLogin (estado, usuario) { state.Authorization = user.Authorization; localStorage.setItem ('Autorización', user.Authorization) }

},
acciones: { }, módulos: { }, captadores: {// Supervisar los cambios de datos getStorage (estado) {// Obtener información de inicio de sesión almacenada localmente if (! state.token) { state.token = JSON.parse (localStorage. getItem ()) } return state.token }

}
})
// almacenar localstorage
export const setStore = (key, data) => { // limpiar antes de almacenar para que siempre haya solo una ventana de información de cuenta.localStorage.clear (); // definir un tiempo para configurar Si expira , borrar let curTime = new Date (). getTime (); // almacenar datos y tiempo de almacenamiento let setdata = { data: data, time: curTime, }; // almacenar datos como tipo de cadena setdata = JSON.stringify (setdata) window.localStorage.setItem (clave, setdata) // console.log (setdata) }

// Obtener locastorage
export const getStore = () => { // Recorrer el localStorage actual para encontrar datos 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) // Compare la hora para ver si expira let curTime = new Date (). getTime (); let tiem = 7 * 24 * 60 * 60 * 1000; if (curTime-str.time> tiem) { window.localStorage.clear (); } else { return str.data } } } } importar axios de "axios"; importar { Mensaje } de "element-ui"; importar Vue de'vue ';






















axios.defaults.timeout = 5000;
axios.defaults.baseURL = 'http://192.168.3.164:xxx';
const { $ mensaje } = Vue.prototype; // http solicitud 拦截 器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 ('Autorización')) {
















config.headers.Authorization = localStorage.getItem ('Autorización');
}
return config;
},
error => { return Promise.reject (error) }

);
// http interceptor de respuesta
// axios.interceptors.response.use (
// respuesta => { // if (response.data === 401) { // if (response.data == 10001) { / / Mensaje ({ // mensaje: 'el token no existe o ha caducado, inicie sesión de nuevo', // escriba: 'advertencia', // duración: 2000 //}); //} // este. $ Enrutador. replace ('/ login'); // localStorage.removeItem ('token') //} // devolver respuesta; //}, // error => { // Mensaje ({ // mensaje: error.message, / / type: 'error', // duración: 2000 //}) // return Promise.reject (error) // devuelve el mensaje de error devuelto por la interfaz //})





















export function get (url, params = {}) { return new Promise ((resolver, rechazar) => { axios.get (url, { params: params }) .then (respuesta => { resolver (respuesta.data); }) .catch (err => { rechazar (err) }) }) }

export function post (url, data = {}) { return new Promise ((resolver, rechazar) => { axios.post (url, data). then (response => { resolve (response.data); }, err = > { rechazar (err) }) }) } función de exportación put (url, data = {}) { return new Promise ((resolver, rechazar) => { axios.put (url, data). then (response => { resolver (respuesta.datos) }, error => { rechazar (error) }) }) } // función http (método, url, datos = {}) { // dejar configData = {}; // deja type = method === 'get'? 'params': 'datos' // configData.method = método; // configData.url = url;























// configData [tipo] = datos;
// configData.headers = { // versiones: '1.0.0', // fuente: '' //} //} // return axios (configData) .catch (err => { // if (err.response .status === 500) return $ message.error ('服务器 错误') // if (err.response.status === 404) return $ message.error ('接口 不 存在') //})

Página de inicio de sesión

 

          <!-- 验证码 -->
          <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>