user

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "0.18.1",
+    "cryptorjs": "^3.0.0",
     "element-ui": "^2.10.1",
     "js-cookie": "2.2.0",
     "moment": "^2.24.0",

src/api/user.js

@@ -30,6 +30,7 @@ export function login(data) {
     data,
   })
 }
+
 export function register(data) {
   return request({
     url: '/ldap-user-manage/',
@@ -37,6 +38,7 @@ export function register(data) {
     data,
   })
 }
+
 export function changePwd(data) {
   const id = data.id
   delete data.id
@@ -47,6 +49,14 @@ export function changePwd(data) {
   })
 }
 
+export function getInfo(params) {
+  return request({
+    url: '/ldap-user-manage/',
+    method: 'get',
+    params,
+  })
+}
+
 // TODO: del
 export function logout() {
   return request({

src/permission.js

@@ -1,32 +1,78 @@
 import router from './router'
 import store from './store'
-import {Message} from 'element-ui'
+import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import {getToken} from '@/utils/auth' // get token from cookie
+import { getToken } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
+import {encoded, decoded} from '@/utils/cryptor'
 
-NProgress.configure({showSpinner: false}) // NProgress Configuration
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login'] // no redirect whitelist
+const whiteList = ['/login', '/register'] // no redirect whitelist
 
-// router.beforeEach(async (to, from, next) => {
-//   // start progress bar
-//   NProgress.start()
+router.beforeEach(async(to, from, next) => {
+  // start progress bar
+  NProgress.start()
 
-//   // set page title
-//   document.title = getPageTitle(to.meta.title)
+  // set page title
+  document.title = getPageTitle(to.meta.title)
 
-//   const accessRoutes = await store.dispatch('permission/generateRoutes', ['admin'])
-//   router.addRoutes(accessRoutes)
-//   next()
-// })
+  // determine whether the user has logged in
+  // const hasToken = getToken()
+  const token = getToken()
 
-router.afterEach(async() => {
-    // document.title = getPageTitle(to.meta.title)
+  if (token) {
+    if (to.path === '/login') {
+      // if is logged in, redirect to the home page
+      next({ path: '/' })
+      NProgress.done()
+    } else {
+      // determine whether the user has obtained his permission roles through getInfo
+      const hasRoles = store.getters.roles && store.getters.roles.length > 0
+      if (hasRoles) {
+        next()
+      } else {
+        try {
+          // // get user info
+          // // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+          const userInfo = await store.dispatch('user/getInfo')
 
-  const accessRoutes = await store.dispatch('permission/generateRoutes' , ['admin'])
-  router.addRoutes(accessRoutes)
+          const roles = userInfo.roles
+
+          // // generate accessible routes map based on roles
+          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+
+          // // dynamically add accessible routes
+          router.addRoutes(accessRoutes)
+
+          // // hack method to ensure that addRoutes is complete
+          // // set the replace: true, so the navigation will not leave a history record
+          next()
+        } catch (error) {
+          // remove token and go to login page to re-login
+          await store.dispatch('user/resetToken')
+          Message.error(error || 'Has Error')
+          next(`/login?redirect=${to.path}`)
+          NProgress.done()
+        }
+      }
+    }
+  } else {
+    /* has no token*/
+
+    if (whiteList.indexOf(to.path) !== -1) {
+      // in the free login whitelist, go directly
+      next()
+    } else {
+      // other pages that do not have permission to access are redirected to the login page.
+      next(`/login?redirect=${to.path}`)
+      NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
   // finish progress bar
   NProgress.done()
-})
+})

src/store/getters.js

@@ -2,8 +2,9 @@ const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
   token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
+  username: state => state.user.username,
+  roles: state => state.user.toles,
   permission_routes: state => state.permission.routes,
+
 }
 export default getters

src/store/modules/user.js

@@ -1,36 +1,40 @@
 import {login, logout, getInfo} from '@/api/user'
 import {getToken, setToken, removeToken} from '@/utils/auth'
+import {encoded, decoded} from '@/utils/cryptor'
 import router, {resetRouter} from '@/router'
 
 const state = {
   token: getToken(),
-  name: '',
-  avatar: '',
+  username: '',
+  roles: [],
 }
 
 const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
-  SET_NAME: (state, name) => {
-    state.name = name
+  SET_USERNAME: (state, username) => {
+    state.username = username
+    console.log('SET_USERNAME', state.username)
   },
-  SET_AVATAR: (state, avatar) => {
-    state.avatar = avatar
+  SET_ROLES: (state, roles) => {
+    state.roles = roles
+    console.log('SET_ROLES', state.roles)
   },
 }
 
 const actions = {
   // user login
   login({commit, dispatch}, userInfo) {
-    const {username, password} = userInfo
+    const {username, password, platform} = userInfo
     return new Promise((resolve, reject) => {
-      login({username: username.trim(), password: password})
+      login({username: username.trim(), password: password, platform: platform})
         .then(async response => {
-          const {data} = response
-          const roles = data.roles || ['admin']
-          commit('SET_TOKEN', data.token)
-          setToken(data.token)
+          // const {data} = response
+          const token = encoded(username)
+          // console.log('login', response)
+          commit('SET_TOKEN', token)
+          setToken(token)
           resolve()
         })
         .catch(error => {
@@ -43,20 +47,31 @@ const actions = {
   // get user info
   getInfo({commit, state}) {
     return new Promise((resolve, reject) => {
-      getInfo(state.token)
+      const username = decoded(state.token)
+      if (!username) {
+        resolve({})
+      }
+      getInfo({search: username})
         .then(response => {
           const {data} = response
-          console.log(data)
+          const userInfo = data[0]
+          let roles = userInfo.o
 
-          if (!data) {
+          if (!userInfo) {
             reject('Verification failed, please Login again.')
           }
 
-          const {name, avatar} = data
+          if (roles.includes('pop-sys-admin')) roles = ['admin']
 
-          commit('SET_NAME', name)
-          commit('SET_AVATAR', avatar)
-          resolve(data)
+          commit('SET_USERNAME', userInfo.uid)
+          commit('SET_ROLES', roles)
+
+          // TODO:
+          console.log('userInfo', userInfo)
+          userInfo.roles = roles
+
+
+          resolve(userInfo)
         })
         .catch(error => {
           reject(error)

src/utils/auth.js

@@ -1,15 +1,13 @@
-import Cookies from 'js-cookie'
-
-const TokenKey = 'vue_admin_template_token'
+const TokenKey = 'token'
 
 export function getToken() {
-  return Cookies.get(TokenKey)
+  return sessionStorage.getItem(TokenKey) || ''
 }
 
 export function setToken(token) {
-  return Cookies.set(TokenKey, token)
+  return sessionStorage.setItem(TokenKey, token)
 }
 
 export function removeToken() {
-  return Cookies.remove(TokenKey)
+  return sessionStorage.removeItem(TokenKey)
 }

src/utils/cryptor.js

@@ -0,0 +1,14 @@
+import cryptorjs from 'cryptorjs'
+ 
+const myCryptor = new cryptorjs('yourSecretKey');
+
+
+export function encoded(str) {
+    return myCryptor.encode(str);
+}
+ 
+
+export function decoded(str) {
+    return myCryptor.decode(str);
+}
+ 

src/utils/request.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 import {MessageBox, Message} from 'element-ui'
 import store from '@/store'
 import {getToken} from '@/utils/auth'
+import {encoded, decoded} from '@/utils/cryptor'
 
 // create an axios instance
 const service = axios.create({
@@ -14,13 +15,17 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
     // do something before request is sent
+    const token = store.getters.token
+    const username = store.getters.username
+    console.log(token, username, decoded(token))
 
-    if (store.getters.token) {
+    // if (decoded(token) !== username) {
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
-    }
+      // config.headers['X-Token'] = getToken()
+      // return Promise.reject('permission denied!')
+    // }
     return config
   },
   error => {
@@ -49,14 +54,12 @@ service.interceptors.response.use(
       Message({
         message: data.errmsg || 'error',
         type: 'error',
-        duration: 5 * 1000
+        duration: 5 * 1000,
       })
       return Promise.reject(data.errmsg || 'error')
     } else {
       return response
     }
-    // TODO: 请求拦截
-    return response
   },
   error => {
     console.log('err' + error) // for debug

src/views/common/login.vue

@@ -77,7 +77,6 @@
 
 <script>
 import { validUsername } from '@/utils/validate'
-import { login } from '@/api/user'
 
 export default {
   name: 'Login',
@@ -125,19 +124,6 @@ export default {
         })
       })
     },
-    login(data) {
-      return new Promise((resolve, reject) => {
-        login(data)
-          .then(res => {
-            const data = res.data
-            resolve(data)
-          })
-          .catch(err => {
-            reject(err)
-            console.log(err)
-          })
-      })
-    },
     async handleLogin() {
       this.loading = true
       try {
@@ -146,11 +132,10 @@ export default {
           this.$message.error('请按要求填写表单！')
           return
         }
-        const data = JSON.parse(JSON.stringify(this.loginForm))
-        const result = await this.login(data)
+        const result = await this.$store.dispatch('user/login', this.loginForm)
         this.loading = false
         this.$message.success('登录成功！')
-        this.$router.push('/')
+        this.$router.push({ path: this.redirect || '/' })
       } catch (err) {
         this.loading = false
         console.log(err)