存储用户信息并获取动态生成个人中心

解润东
2021102501

src/permission.js

@@ -10,10 +10,8 @@ router.beforeEach(async(to, from, next) => {
     //next:一定要调用该方法来 resolve 这个钩子
     
     const hasToken = getToken()//确定用户是否已登录
-    console.log(hasToken)
      if (hasToken) {
         if (to.path === '/login2') {
-            alert(123)
             next({ path: '/message-center' })
         } else { 
             next()

src/utils/userInfo.js

+
+
+const UserInfo = 'userInfo'
+
+export function getUserInfo() {
+  return JSON.parse(sessionStorage.getItem(UserInfo))
+}
+
+export function setUserInfo(userInfo) {
+  return sessionStorage.setItem(UserInfo,JSON.stringify(userInfo))
+}
+
+export function removeUserInfo() {
+  return sessionStorage.removeItem(UserInfo)
+}

src/views/Login2.vue

@@ -53,6 +53,7 @@
 <script>
 import { getFun,postFun } from '@/service/table'
 import { setToken } from '@/utils/auth'
+import { setUserInfo ,getUserInfo} from '@/utils/userInfo'
 export default {
   data() {
     return {
@@ -67,8 +68,17 @@ export default {
   methods: {
      onSubmit(values) {
         getFun('check/token',values).then((Response)=>{
-            console.log(Response)
             if(Response.code==0){
+                postFun('mobile/user').then((Response2)=>{
+                    var userInfo={
+                        avatar:Response2.data.avatar,
+                        userName:Response2.data.userName,
+                        deptName:Response2.data.dept.deptName
+                    }
+                    /* 存储用户信息 */
+                    setUserInfo(userInfo)
+                    console.log(getUserInfo())
+                })
                 this.$notify({
                     message:'登录成功',
                     background:'green',

src/views/my/index.vue

@@ -63,6 +63,7 @@
 <script>
 import tabBar from "@/components/TabBar";
 import { removeToken } from '@/utils/auth' // get token from cookie
+import { getUserInfo} from '@/utils/userInfo'
 export default {
   components: {
     tabBar
@@ -71,8 +72,10 @@ export default {
     return {
       userInfo: {
         portrait: require("@/assets/myTerritory/touxiang.png"),
-        name: "刘华强",
-        position: "技术安全部"
+        name: getUserInfo()?getUserInfo().userName:"刘华强",
+        position: getUserInfo()?getUserInfo().deptName:"技术安全部",
+        // name: "刘华强",
+        // position: "技术安全部"
         // jurisdiction: [
         //   '隐患上报人',
         //   '隐患整改人',