0.0.3

可以正常登录，但是进去以后动态路由不显示

mock/user.js

@@ -1,6 +1,6 @@
 
 const tokens = {
-  "15210211200": {
+  admin: {
     token: 'admin-token'
   },
   editor: {

package.json

@@ -103,11 +103,6 @@
       "git add"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"

src/api/user.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    // url: '/vue-element-admin/user/login',
+    //url: '/vue-element-admin/user/login',
     url: 'http://192.168.1.201:9501/api/login',
     method: 'post',
     data

src/layout/components/Navbar.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="navbar">
+    这里是layout components/navbar.vue
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

src/layout/components/Sidebar/index-copy.vue

@@ -0,0 +1,56 @@
+<template>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <p style="height:30p;font-size:14px;color:#fff">这里是layout/cpmponents/sidebar/index.vue</p>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :unique-opened="false"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters([
+      'permission_routes',
+      'sidebar'
+    ]),
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
+    variables() {
+      return variables
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse" />
+    <p style="height:30p;font-size:14px;color:#fff">这里是layout/cpmponents/sidebar/index.vue</p>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -15,6 +16,7 @@
         <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
+
   </div>
 </template>
 
@@ -28,7 +30,7 @@ export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
-      'permission_routes',
+      'permission_routes', //获得动态路由信息
       'sidebar'
     ]),
     activeMenu() {

src/store/modules/user.js

@@ -7,12 +7,14 @@ const state = {
   name: '',
   avatar: '',
   introduction: '',
-  roles: []
+  roles: ["admin"]
 }
 
 const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
+    //测试，后面删掉
+    //state.token = "admin-token"
   },
   SET_INTRODUCTION: (state, introduction) => {
     state.introduction = introduction
@@ -32,13 +34,15 @@ const actions = {
 
   // 用户登录
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { username, password , type, captcha} = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token)
-        resolve()
+      login({ username: username.trim(), password: password, type:type, captcha:captcha.trim()}).then(response => {
+        //const { data } = response
+        commit('SET_TOKEN', response.data.token)
+        console.log(response.data.token)
+        setToken(response.data.token,response.data.exp)
+        //返回response
+        resolve(response);
       }).catch(error => {
         reject(error)
       })
@@ -51,8 +55,8 @@ const actions = {
       getInfo(state.token).then(response => {
         const { data } = response
 
-        if (!data) {
-          reject('Verification failed, please Login again.')
+        if (!data.token) {
+          reject('未获取到token!')
         }
 
         const { roles, name, avatar, introduction } = data
@@ -105,6 +109,7 @@ const actions = {
 
   // dynamically modify permissions
   async changeRoles({ commit, dispatch }, role) {
+    console.log(123123123)
     const token = role + '-token'
 
     commit('SET_TOKEN', token)

src/store/modules/user菜单不正常显示.js

@@ -0,0 +1,141 @@
+import { login, logout, getInfo } from '@/api/user'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import router, { resetRouter } from '@/router'
+
+const state = {
+  token: getToken(),
+  name: '',
+  avatar: '',
+  introduction: '',
+  roles: ["admin"]
+}
+
+const mutations = {
+  SET_TOKEN: (state, token) => {
+    state.token = token
+    //测试，后面删掉
+    //state.token = "admin-token"
+  },
+  SET_INTRODUCTION: (state, introduction) => {
+    state.introduction = introduction
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  },
+  SET_ROLES: (state, roles) => {
+    state.roles = roles
+  }
+}
+
+const actions = {
+
+  // 用户登录
+  login({ commit }, userInfo) {
+    const { username, password , type, captcha} = userInfo
+    return new Promise((resolve, reject) => {
+      login({ username: username.trim(), password: password, type:type, captcha:captcha.trim()}).then(response => {
+        //const { data } = response
+        //我改了这个
+        //commit('SET_TOKEN', response.data.token)
+        commit('SET_TOKEN', "admin-token")
+        //console.log(response.data.token)
+        //我改了这个
+        //setToken(response.data.token,response.data.exp)
+        setToken("admin-token",response.data.exp)
+        //返回response
+        resolve(response);
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // 获取用户身份详情
+  getInfo({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getInfo(state.token).then(response => {
+        const { data } = response
+
+        if (!data.token) {
+          reject('未获取到token!')
+        }
+
+        const { roles, name, avatar, introduction } = data
+
+        // roles must be a non-empty array
+        if (!roles || roles.length <= 0) {
+          reject('getInfo: roles must be a non-null array!')
+        }
+
+        commit('SET_ROLES', roles)
+        commit('SET_NAME', name)
+        commit('SET_AVATAR', avatar)
+        commit('SET_INTRODUCTION', introduction)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // 用户退出
+  logout({ commit, state, dispatch }) {
+    return new Promise((resolve, reject) => {
+      logout(state.token).then(() => {
+        commit('SET_TOKEN', '')
+        commit('SET_ROLES', [])
+        removeToken()
+        resetRouter()
+
+        // reset visited views and cached views
+        // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
+        dispatch('tagsView/delAllViews', null, { root: true })
+
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // 清除token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      commit('SET_TOKEN', '')
+      commit('SET_ROLES', [])
+      removeToken()
+      resolve()
+    })
+  },
+
+  // dynamically modify permissions
+  async changeRoles({ commit, dispatch }, role) {
+    console.log(123123123)
+    const token = role + '-token'
+
+    commit('SET_TOKEN', token)
+    setToken(token)
+
+    const { roles } = await dispatch('getInfo')
+
+    resetRouter()
+
+    // generate accessible routes map based on roles
+    const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
+    // dynamically add accessible routes
+    router.addRoutes(accessRoutes)
+
+    // reset visited views and cached views
+    dispatch('tagsView/delAllViews', null, { root: true })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/user菜单正常显示.js

@@ -0,0 +1,131 @@
+import { login, logout, getInfo } from '@/api/user'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import router, { resetRouter } from '@/router'
+
+const state = {
+  token: getToken(),
+  name: '',
+  avatar: '',
+  introduction: '',
+  roles: []
+}
+
+const mutations = {
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  },
+  SET_INTRODUCTION: (state, introduction) => {
+    state.introduction = introduction
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  },
+  SET_ROLES: (state, roles) => {
+    state.roles = roles
+  }
+}
+
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { username, password } = userInfo
+    return new Promise((resolve, reject) => {
+      login({ username: username.trim(), password: password }).then(response => {
+        const { data } = response
+        commit('SET_TOKEN', data.token)
+        setToken(data.token)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // get user info
+  getInfo({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getInfo(state.token).then(response => {
+        const { data } = response
+
+        if (!data) {
+          reject('Verification failed, please Login again.')
+        }
+
+        const { roles, name, avatar, introduction } = data
+
+        // roles must be a non-empty array
+        if (!roles || roles.length <= 0) {
+          reject('getInfo: roles must be a non-null array!')
+        }
+
+        commit('SET_ROLES', roles)
+        commit('SET_NAME', name)
+        commit('SET_AVATAR', avatar)
+        commit('SET_INTRODUCTION', introduction)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // user logout
+  logout({ commit, state, dispatch }) {
+    return new Promise((resolve, reject) => {
+      logout(state.token).then(() => {
+        commit('SET_TOKEN', '')
+        commit('SET_ROLES', [])
+        removeToken()
+        resetRouter()
+
+        // reset visited views and cached views
+        // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
+        dispatch('tagsView/delAllViews', null, { root: true })
+
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      commit('SET_TOKEN', '')
+      commit('SET_ROLES', [])
+      removeToken()
+      resolve()
+    })
+  },
+
+  // dynamically modify permissions
+  async changeRoles({ commit, dispatch }, role) {
+    const token = role + '-token'
+
+    commit('SET_TOKEN', token)
+    setToken(token)
+
+    const { roles } = await dispatch('getInfo')
+
+    resetRouter()
+
+    // generate accessible routes map based on roles
+    const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
+    // dynamically add accessible routes
+    router.addRoutes(accessRoutes)
+
+    // reset visited views and cached views
+    dispatch('tagsView/delAllViews', null, { root: true })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/utils/auth-default.js

@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'Admin-Token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/auth.js

@@ -3,11 +3,15 @@ import Cookies from 'js-cookie'
 const TokenKey = 'Admin-Token'
 
 export function getToken() {
-  return Cookies.get(TokenKey)
+  return Cookies.get("userToken")
 }
 
-export function setToken(token) {
-  return Cookies.set(TokenKey, token)
+export function setToken(token,time) {
+  //return Cookies.set(TokenKey, token)
+  //把秒转换成天
+  const secondsUntilExpiry = time;
+  const daysUntilExpiry = secondsUntilExpiry / (24 * 60 * 60);
+  Cookies.set("userToken",token,{expires:daysUntilExpiry})
 }
 
 export function removeToken() {

src/views/dashboard/admin/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard-editor-container">
+    这段文字是通过views/dashboard/index.vue判断生成的
     <github-corner class="github-corner" />
-
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">

src/views/login/index.vue

@@ -125,7 +125,7 @@ export default {
       loginForm: { // 1.用户使用哪些信息登录
         username: '', // 1
         password: '', // 111111
-        type: 1,
+        type: 1, //1=账号密码登录
         captcha: ''
       },
       loginRules: { // 2.配置from表单验证规则
@@ -160,6 +160,18 @@ export default {
   mounted() {
     this.getImgCode()
   },
+  watch: {
+    $route: {
+      handler: function(route) {
+        const query = route.query
+        if (query) {
+          this.redirect = query.redirect
+          this.otherQuery = this.getOtherQuery(query)
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     // 检查输入状态
     checkCapslock(e) {
@@ -181,17 +193,26 @@ export default {
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
-          console.log()
-          // 开始登录
-          // this.loading = true
-          // this.$store.dispatch('user/login', this.loginForm)
-          //   .then(() => {
-          //     this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
-          //     this.loading = false
-          //   })
-          //   .catch(() => {
-          //     this.loading = false
-          //   })
+          //console.log(this.loginForm)
+          //开始登录
+          this.loading = true
+          this.$store.dispatch('user/login', this.loginForm)
+            .then( res => {
+              this.loading = false
+              console.log(res)
+              if(res.code==0){
+                this.$message({
+                  type:'error',
+                  message:"表单项有误，请检查  ！"
+                })
+              }else if(res.code==200){
+                console.log("登录成功，将跳转至详情页面！")
+                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+              }
+            })
+            .catch(() => {
+              this.loading = false
+            })
         } else {
           console.log('error submit!!')
           return false

src/views/login/index-copy.vue → src/views/login/index111.vue

@@ -2,12 +2,12 @@
   <div class="login-container">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
 
-      <!-- <div class="title-container">
+      <div class="title-container">
         <h3 class="title">
           {{ $t('login.title') }}
         </h3>
         <lang-select class="set-language" />
-      </div> -->
+      </div>
 
       <el-form-item prop="username">
         <span class="svg-container">
@@ -52,7 +52,7 @@
         {{ $t('login.logIn') }}
       </el-button>
 
-      <!-- <div style="position:relative">
+      <div style="position:relative">
         <div class="tips">
           <span>{{ $t('login.username') }} : admin</span>
           <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
@@ -67,7 +67,7 @@
         <el-button class="thirdparty-button" type="primary" @click="showDialog=true">
           {{ $t('login.thirdparty') }}
         </el-button>
-      </div> -->
+      </div>
     </el-form>
 
     <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
@@ -82,14 +82,13 @@
 
 <script>
 import { validUsername } from '@/utils/validate'
-// import LangSelect from '@/components/LangSelect'
-// import SocialSign from './components/SocialSignin'
+import LangSelect from '@/components/LangSelect'
+import SocialSign from './components/SocialSignin'
 
 export default {
   name: 'Login',
-  // components: { LangSelect, SocialSign },
+  components: { LangSelect, SocialSign },
   data() {
-    // 配置验证规则：用于表单验证
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
         callback(new Error('Please enter the correct user name'))
@@ -104,13 +103,12 @@ export default {
         callback()
       }
     }
-    // 本页基础数据
     return {
-      loginForm: { // 1.用户登录
+      loginForm: {
         username: 'admin',
         password: '111111'
       },
-      loginRules: { // 2.配置验证规则
+      loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },

vue.config.js

@@ -27,7 +27,8 @@ module.exports = {
   publicPath: '/',
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
+  //lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: false,
   productionSourceMap: false,
   devServer: {
     port: port,